【vue+printJs】前端打印, 自定义字体大小, 自定义样式, 封装共享样式

效果示例

思维导图

1,基本使用

1, 依赖下载

npm i print-js --save   /^1.6.0/

2, 页面导入

<div id="printMeasure">
// id包裹需要打印的内容
</div>
<el-button type="primary" @click="printClk">打 印</el-button>
...//无关内容已省略
import print from 'print-js'
...//无关内容已省略
printClk() {
   
  this.$nextTick(() => {
   
    print({
   
      printable: 'printMeasure', // 打印的内容id,跟上面对应
      type: 'html', // 打印的类型, 详细的可以在官方文档https://printjs.crabbly.com/中查询
      targetStyles: '*', // 继承样式, 不能自定义修改
    })
  })
},

以上步骤可以实现基本的页面打印, 但不能修改字体大小, 请看下一步

3, 修改字体大小(可行但不推荐)

node_modules/print-js/dist/print.js
206 行

<!