上个月, 在写公司项目的时候, 遇到了一个页面局部打印的需求, 最后是使用html2canvas和jspdf实现的, 这些js库可以将HTML元素转化为Canvas, 再将Canvas转化为PDF, 从而实现局部打印
今天, 我们主要说一下第二种方案, 就是使用print.js, 创建好Vue项目, 将print.js依赖进行下载
npm install print-js --save下载好之后, 我们就可以在package.json中看到了
随后, 需要在使用该插件的地方进行引入
引入完成之后, 我们可以写一些HTML元素
写好之后, 我们可以给想要打印的元素绑定一个id, 表示需要打印该元素以内的所有元素
随后, 需要给按钮绑定一个事件, 用于点击后调用print.js, 将配置项传递进去
我们看一下页面呈现
现在, 点击按钮, 看看打印效果
该插件也支持传入很多配置项比如:
css,style, scanStyles, targetStyle, targetStyles, ignoreElements, properties, repeatTableHeader, showModal...等等
大家如果想要了解更多配置, 可以点击查看原文
今天, 我们就讲解到这里
明天见
