vue[浏览器打印操作的插件收集及使用心得]_vue3打印插件_墨水白云的博客-CSDN博客

在前端使用浏览器调用其电脑连接的打印机进行打印操作，通常情况下我们可以使用原生的js方式，也可以使用插件的方式。

关于原生打印

原生打印在实际开发中不太推荐，毕竟这个东西是一个比较大的功能，自己根据内容与原理开发出来的东西不仅要花时间，而且还有可能不稳定。但了解原生打印确实是非常有必要的。
原生打印方法：window.print()
参考文章：
1、https://blog.csdn.net/yongchao940/article/details/73129425
2、https://blog.csdn.net/wdf521121/article/details/84935256

关于打印插件推荐

第一款

vue-print-nb：https://github.com/Power-kxLee/vue-print-nb

参考文章：https://www.cnblogs.com/steamed-twisted-roll/p/10683680.html

第二款

vue print.js：https://github.com/xyl66/vuePlugs_printjs

参考文章：https://www.jb51.net/article/181966.htm

第三款

Print.js：https://github.com/crabbly/Print.js
参考文章：https://blog.csdn.net/wwjoyous/article/details/80881881

第四款

这个需要先行引入jquery
jQuery.print：https://github.com/DoersGuild/jQuery.print

总结：在目前的vue开发的市场上，我们通常使用的是一些插件来对内容进行打印操作，而原生的打印功能一般是不会直接拿来用的，毕竟在线上可能会出现各种问题，而插件的话问题要少的多。因此上面几款则是当前vue开发中打印这个功能用的比较多的插件。

究其使用方式其实都是给一个div盒子带上一个id或者ref标志，然后拿到其中的内容，执行打印方法即可。

相比之下我自己更喜欢用第二或第三款，因为是自己去其github上下载一个js文件引入使用，好处就是可以自己随意的修改完善这个打印的js以适用于当前的开发内容。
第二款和第三款的差别在于第三款的配置参数多好多，可以进行更复杂的操作。
第一款和第四款都是十分简单的，如果不熟悉js打印或者打印内容很简单直接用第一款或者第四款即可。

推荐：有选择恐惧症的人来看，简单功能直接用第一款，复杂功能直接用第三款，自由点的功能直接用第二款。如果项目引入了jq则直接第四款。用起来都很简单。

关于打印分页

使用的打印插件都有一个共同点，那就是选中打印的div标签内容，通常是一个id或者ref所包含的内容。
建议：在vue中所需要打印的内容通通都放置在一个对应组件中，然后用css样式或者其他内容修饰完毕后在调用打印的方法。
由于我当前项目引入了jq因此我当前用的第四款打印功能。
打印组件如下：
在这里插入图片描述

在这里插入图片描述

  1. 打印分页需要注意的第一个要素：

    id的框和高必须是100%;

  2. 打印分页需要注意的第二个要素：
    子内容的首层高度必须是100%高度，这样才能保证一层内容为一个页面。
    例如：
    在这里插入图片描述

这个里面#print-component-main的高度是100%，因此其内容将会占据满一页，而.print-item的高度也是100%，当print-item有两个的时候，其总高度则是200%，此时内容会进行溢出到第二页，此时就会出现两页内容，这样就产生了分页的效果。而且不会有任何的穿页的情况。
注意事项：

打印#print-component-main高度的100%指的是相对纸张来的100%。即打印预览中的纸张尺寸
在这里插入图片描述
如果不知道纸张尺寸则可以从
在这里插入图片描述
查看如下：不同的打印机会有不同的选择内容，因此注意打印的纸张选择问题
在这里插入图片描述
打印机1号首选项
在这里插入图片描述
打印机2号首选项
在这里插入图片描述
如果没有满足需求的打印机纸张尺寸，也可以自己创建。(这个需要打印机的权限开启才行!)
在这里插入图片描述
选好了尺寸了那么我们就差不多已经了解了打印分页的一大半了。

另一个重要的内容就是要知道打印纸张的尺寸单位是毫米，而我们开发中所使用的单位则是px，但是px与mm确是无法进行换算的。因此我们要注意一页中的内容不能大于当前页面的总高度。
例如：
我要打印一个表格，这个表格数据有二十几行，其内容占据了两页，因此我们要控制行高，如果不控制住则会出现截断的情况。
解决方式1：行高使用百分比：即.print-item下面在加上一个外框.print-item-box 类，这个类的高度则是百分比，即一页放x条数据，则此类高度为（100 / x )%
在这里插入图片描述
在这里插入图片描述

解决方式2：高度也可以使用固定的px来设置，而这时却需要多次进行测试，检测一页可以放置多少条数据。只需要保证 数据量 n * 高度px < 100%页面高度即可。不然会出现截断，当然这样也可能造成一些问题，那就是最底下可能会优点空白。

关于打印比例与横纵

打印的横纵其实就是纸张竖直放置和横向放置的区别
在这里插入图片描述
其中边距、缩放、页眉页脚、背景图形通常都是不会使用的，默认即可。(因为需要打印的内容完全可以在html中写好并且用css修饰好，因此没太大必要使用这些选项。)
如果有需要请知道其作用之后在使用，如果有预览效果，选择之后会直接产生效果。
在这里插入图片描述

关于打印样式问题以及图片打印方式

打印的样式要严格的使用#id包裹起来，并且将样式放置为全局样式。这样就不会有影响，且打印会生效。

图片打印方式：可以使用html2canvas配合打印插件进行打印。

html2canvas是一个将Html+css的dom页面转换成图片的插件，然后使用打印插件对这个图片进行打印即可。
参考文章：
1、https://blog.csdn.net/qq_33183456/article/details/105220911
2、https://segmentfault.com/a/1190000020475766

转成图片在打印的好处在于处理一些需要对打印进行配置的内容处理更加的容易。而且转成图片可以避免一些打印相关的样式以及排布格式问题。通常情况下网页的打印就能够满足大部分要求了。网页打印的需求不够了才使用这个试试。

原网址: 访问
创建于: 2023-08-09 19:02:21
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论