Vue Print-js 打印问题记录~

问题描述

Vue项目利用连接针式打印机打印相关单据，打印出来的文字不清晰，字体颜色模糊。

解决思路

1、看是否样式问题

在查看Print.js 文档后发现，TA可以自己设置样式。然后我就以为是没有设置打印样式问题而导致的。

Print({
    printable: 'print-box',
    type: 'html',
    documentTitle: '文档标题',
    header: '统计图',
    headerStyle: 'font-weight:400;text-align:center;',
    style: '@page {margin: 0 10mm};', // 不打印页眉和页脚
    honorColor: true, // 是否打印彩色文本
    targetStyles: ['*'] // 允许打印所有样式属性
  })

重新设置后在打印，发现问题依然存在。

然后在打印预览的时候发现普通的打印是可以选择文字什么的。而我们这个选不中才发现之前打印的逻辑是先生成base64的图片，打印的是图片。那会不会是​图片模糊导致的呢？

2、将打印改成了DOM元素。

设置 printable 为需要打印模板的id，打印的时候不是图片url地址

3、重新打印后发现不是那么模糊了。但是又涉及纸张大小的问题和文字重叠显示不全

于是重新设置打印模板的宽度和模板内元素的宽度并将字体颜色设置成 #000后，重新打印。问题完美解决。

5、总结

1、打印的是生成的图片，导致不清晰。

2、字体的颜色直接设置为黑色

3、打印的时候因为涉及到dpi 纸张大小等。需要注意！