封装 print.js 实现局部打印

既然打印的是 body 里的内容，那么我们可以手动创建一个 dom 元素，当执行 print() 时替换掉 body, print() 有两个生命周期勾子函数，分别是 beforeprint 和 afterprint, 在打印前替换dom 以实现打印我想要的 dom， 打印后重新恢复之前的 dom 就好了。

这种 github 上找了个案例，测试了下

因涉及一些执行语句，禁止写入，请联系客服获取

其 100 多行就实现了刚才描述的效果，但是功能比较简单，不支持配置一些常用参数如自定义样式覆盖，而且我发现一个 bug,就是默认就给显示了 2 页，而此时内容其实很少，导致又一个空白页；不过可以在这个基础上拓展一下，还是不错的。

CLODOP 打印控件

据说功能很强大可以静默打印，但是不支持 mac系统，pass 官网

终极方案：printJS

这是我最终选定的方案，和上面那个简陋的js 封装函数相比，其提供了更多的功能配置，并可支持 pdf、html、image、json、raw-html 打印。

github 地址

使用也很简单：

npm install print-js --save // 以vue 为例 main.js import printJS from 'print-js' Vue.prototype.$printJS = printJS // 以 html 格式为例 // 在vue 文件里直接 this.$printJS({printable: 'elementId',type: 'html', : ['*']})

这个方案我在使用的时候也一度遇到了一个bug,是因为我用的 image 格式，基于 html-to-image 将网页元素转化为 png 图片，然后使用

this.$printJS({printable: image-url,type: 'image'})

来打印，用图片打印有个好处，就是样式不会错位，可是出现了一个报错： css的跨域，问题出在html-to-image 插件上，不使用这个插件就没这个bug 了。

css 跨域经常是由于 在js 内部使用了 link 标签引入css 样式，随着浏览器的安全要求越来越严格，现需要在link 上配置 crossOrigin="anonymous"。

还有个问题，我使用了内网 cdn 的情况下，打印预览中 css 样式全部丢失，暂不清楚原因，先放弃cdn 形式使用。

总结

网页打印的功能在一些 ims 系统中已经很常见，上面这几个优化方案都是最近遇到后临时研究后的成果，已经满足我们的项目需求，可能还有不足之处，仅可供参考。