使用print-js打印时，页面设置字体不生效问题

前言

在使用打印功能时，打印内容对比页面展示的内容有缺失。原因是页面上显示的文字font-size是9pt，然而调用print-js时，字体变大了，导致同样的高度展示的文字内容少了，造成了内容缺失的现象。

查看nodemodules/print-js/dist/print.js文件发现，print-js接受一个font_size的入参，而这个参数的默认值是12pt。所以，当我们没有传font_size时，print-js就会将所有的字体大小都设置成12pt，就导致了上述问题。

解决方案

首先将nodemodules/print-js/dist/print.js放到本地，如src/common/util文件夹下，接着在引入print-js的地方有所修改。

// import printJS from 'print-js'
import printJS from '@/common/util/print.js'
1
2

接着修改源码，将对font-size的设置去掉，从而打印时所显示的内容就与页面展示一致了。

  // elementStyle += 'max-width: ' + params.maxWidth + 'px !important; font-size: ' + params.font_size + ' !important;';
  elementStyle += 'max-width: ' + params.maxWidth + 'px !important;';
1
2

参考文章

【vue】print-js打印，解决font-size不生效问题