首页 前端知识 使用print-js打印时,页面设置字体不生效问题

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

2024-06-21 09:06:32 前端知识 前端哥 839 485 我要收藏

前言

在使用打印功能时,打印内容对比页面展示的内容有缺失。原因是页面上显示的文字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'

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

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

参考文章

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13150.html
标签
评论
发布的文章

html 个人主页

2024-07-13 22:07:08

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!