解决Vue下使用print.js 设置font-size属性无效问题

  • Post author:
  • Post category:vue


背景:由于公司最近做的项目需要进行打印,于是项目使用了print.js进行打印处理,打印内容标题显示的文字需要做加大处理,发现需要打印的内容并没有按照设定的font-size显示,尝试了很多办法都无法解决,于是着手从print.js源码开始下手。

1、首先找到print.js,我这里是通过npm安装的print.js插件,我在node_modules下找到print-js目录。

2、展开找到print.js文件

3、进去看到源码也是无从下手,于是想到调用的地方传入了读取原始样式的配置,于是通过调用方法传入的参数进行搜索,所有关键字“targetStyles”

 print({
        printable: "print_container",
        type: "html",
        targetStyles: ["*"],
      });

4、找到之后,发现print.js中字体大小是写死的一个常量,源代码如下:

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

我这里将这句代码修改成如下:

elementStyle += 'max-width: ' + params.maxWidth + 'px !important;'; //解决print.js 不能修改font_size属性问题

修改后,发现问题得到了解决。

修改前打印预览:

修改后打印预览:

至于修改了会不会引发别的问题,目前也是未知,谨慎使用。



版权声明:本文为Mr_chunchun原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。