前端调用浏览器的打印归纳下

354 阅读2分钟

“开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天,点击查看活动详情

0 环境

  • 编辑器:webstorm或者vscode
  • 系统版本:windows10
  • 编辑器版本:最新
  • 浏览器:谷歌

1 参考文档

hiprint

easy-print

2 hiprint

好处就很明显,无需自己手动控制分页,常见几家浏览器支持都可以,打印效果很好,并且你觉得用代码纯手撸很不方便或者有点麻烦,那么好处在于可以在线拖拽制作好页面效果,直接导出代码,复制到本地即可使用,这种就很香,也可以直接以代码方式直接书写,还有个好处是可以直接浏览器调用,虽然它也可以和lodop一样安装它的驱动,但是我们可以双向选择,就很人性化。除了不可以npm直接下载,导入麻烦,其他还能接受,当然也有基于hiprint的打印插件,比如easy-print,不过不建议使用它。如下图:提供了丰富的实例。

image.png

image.png

image.png

3 总结

之前主要介绍常用的,现在推荐使用hiprint,它是一款用于web打印的js组件,免费使用、忽略打印机的差异、打印内容个性化、分页可以自定义和批量打印的功能,以及提供给我们的在线预览功能,还有就是可供选择的在线打印和通过驱动打印的方案,并且使用门槛较低,本来我们需要写js+html+css,各种判断和调试样式,以及分页的考虑等等,现在只需要在线画出布局,导出自己的代码,在微调下即可,而且亲测十几页的内容一点,加载速度很快,但是没有打印方向的选择,好像是自动判断的,宽度 > 高度 = 横向,否则就是纵向。说了很多的优点,但是有个缺点,相对于前面几种方式,它的搜索结果相对来说较少,但是没关系正常对照文档,是可以上手的。