卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
首页 › 技术 › Vue Print-js 打印问题记录~

Vue Print-js 打印问题记录~

坚果大叔
2022-09-29 17:35:25技术阅读 1,661

问题描述

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 纸张大小等。需要注意!

赞赏 赞(2)
感受了一波余震~
上一篇
喵喵喵
下一篇
再想想
暂无评论
今日天气
标签
CSS (16) Filter (2) Flex (2) Git (3) html (3) JavaScript (15) Jquery (2) JS (4) linux (2) localstorage (2) mac (1) map (2) mongoDB (1) python (3) set (2) vite (2) vue (9) websocket (1) wordpress (2) 二维码 (1) 傍晚 (2) 刷新页面 (1) 字符串 (5) 对象 (3) 小程序 (6) 年终 (1) 微信 (9) 微信机器人 (5) 总结 (1) 数据类型 (3) 数组 (5) 日常问题 (4) 服务器 (1) 朝阳 (1) 正则 (3) 生活 (6) 移动端 (2) 空地 (1) 组件 (1) 节流 (1) 记录 (3) 远方 (1) 防抖 (1) 验证码 (1) 高楼 (1)
近期文章
  • 一点
  • 微信小程序批量提交后台审核
  • 新年快乐🎉
  • Home
  • 随便转转!
归档
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年3月
  • 2018年2月
  • 2017年12月
  • 2017年11月
  • 2017年9月
  • 2012年12月
  • 2002年11月
微信小程序批量提交后台审核
2023-01-29 17:56:58
114 0 1
Home
2023-01-19 13:49:05
64 0 0
2022!充满魔幻的一年!
2022-12-31 21:09:51
142 0 0
小程序wx.showToast真机不显示?
2022-11-03 17:42:55
510 0 0
2
  • 2
  • 0
博主

一枚佛系前端开发,会一丢丢摄影,喜欢折腾,爱好美食。分享点前端技巧、笔记以及各种有趣的APP和资源教程♥♥

友链
Lieme
公众号
西豆 崔欣 执行上下文 卖坚果的怪叔叔 集赞助手
Copyright © 2017-2023 卖坚果的怪叔叔. Designed by nicetheme.

苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
# WordPress # # CSS #
坚果大叔
226
文章
59
评论
159
喜欢