网页打印输出设置在哪里,网页打印设置在哪里

首页 > 实用技巧 > 作者:YD1662023-05-07 08:23:36

打印纸

纸张的规格是指纸张制成后经过修整切边裁成一定的尺寸大小,打印纸是指打印或复印文件时使用的纸张。按照纸张幅面的基本面积把幅面规格分为A系列、B系列和C系列,*0纸张沿长度方式对开成两等分便成为*1规格,将*1纸张沿长度方向对开便成为*2规格,以此类推*10规格。其中A3、A4、A5、A6和B4、B5、B6七种幅面规格为打印纸的常用规格。

网页打印输出设置在哪里,网页打印设置在哪里(1)

二维码图像设计

在我们的NC无忧管理系统中需要对设备生成二维码图像,用户可以打印该二维码并贴在设备上面用来扫描识别设备信息。在WEB中实现二维码图像打印功能还是很简单的,具体的功能实现可以参考文章-。单个图像打印只要将输出内容看成图片来输出即可,选择什么规格的打印纸张就输出对应的规格的图像即可。

网页打印输出设置在哪里,网页打印设置在哪里(2)

图像批量打印

第二种模式就是批量打印功能的实现,目前的实现方法是选择要打印的设备编号动态生成一张排版好的页面(设置为A4纸张,一次打印4个二维码图像),当用户点击“打印”时将页面进行打印输出。考虑到用户对不同规格纸张打印的需求现在要做的就是如何让打印更适用于用户,所以就需要考虑排版的灵活性了。

网页打印输出设置在哪里,网页打印设置在哪里(3)

​添加页面设置

在页面中添加页面设置功能,主要分为纸张设置和图像设置两个部分。纸张设置可以让用户自行设置页面的纸张大小和边距(默认设置为A4纸张,一次打印4个二维码图像)。图像设置则可以让用户自行设置二维码图像大小、排版的行数和列数,以及图像的间距等。

网页打印输出设置在哪里,网页打印设置在哪里(4)

​WEB页面打印

最后将排版好的页面通过打印机输出指定规格的纸张上,使用如window.print()方法就能轻松的实现页面打印,但是这种方式会将整个页面打印。这里我们只需要局部打印,而且要对打印区域进行过滤筛选。比如隐藏上面的上一页、下一页和打印按钮,将其样式设置为class="noprint"并定义打印时将其样式隐藏起来即可。

网页打印输出设置在哪里,网页打印设置在哪里(5)

window.print()打印时如果内容超出会自动分页,这里我们页面设计的时候在web上实现自动分页功能。在WEB上实现打印的方法很多,window.print()这个函数可以实现最简单的打印功能(自带的打印控件局限性较大,设置功能少)。如果想设置一些复杂的打印可以尝试其他第三方的打印插件,如vue-print-nb、vuePlugs_printjs、print.js等等。

网页打印输出设置在哪里,网页打印设置在哪里(6)

​总结:

个人比较喜欢vuePlugs_printjs插件,因为可控性相对强些可以过滤掉一些不需要输出的内容。以上内容是小编给大家分享的WEB自定义二维码图像打印实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。更多Vue实战技巧可以参考专栏:Vue实战系列,在此也非常感谢大家对小编的支持!

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.