html 多个分页连续打印机,web使用window.print()实现分页批量打印。

写了有关于web客户端打印物料条码的功能。想着以后可能会用到,就把他给写下来了。

主要参考了:https://blog.csdn.net/ww130929/article/details/71977187

https://www.jb51.net/article/117782.htm

功能描述:

打印可以给工厂使用的标签,用来扫描物料条码。里面除了包括物料信息(数量,编码,生产订单号等)外还有就是条形码跟加工图。并且要能够同时打印多张条码。这个功能之前是用java做的,但是后来发现java只能实现服务器端打印,实际上这个功能要满足客户端打印,连接的是客户端的打印机,所以就去找了一些web打印的例子。用的是window.print()这个方法。

知识点记录:

window.print()是调用浏览器本身的打印功能,打印的是当前页面的信息,所以打印之前需要重写当前页面的内容:用window.document.body.innerHTML。

批量打印根据打印分页,使用

分页功能给需要打印的内容分页。

图片加载:可以直接用img的src获取后台图片信息。需要注意的是,页面加载比访问数据来的快,如果图片是动态加载的话,可以设置setTimeout(function(){ window.print();  },500);来延迟打印功能,先让图片加载完。

代码:

打印的表格直接写在一个隐藏的(style=”visibility:hidden; “)的div里面,后面可以根据jquery的$(“#printDetailDiv”).prop(“outerHTML”)或则document.getElementById(“###”).outerHTML;来获取整个div里面的信息,比较直观也可以减少重写当前页面的时候字符串的拼接。

物料编码

规格

生产订单号

数量

研发编码

BOM明细编号

2 用JS拼接需要批量打印的内容。

function creatTB(checkMsg){

var printHtml = “”;

for(i=0;i”);

$(“#img2”).html(“

《html 多个分页连续打印机,web使用window.print()实现分页批量打印。》“);

printHtml = printHtml + $(“#printDetailDiv”).prop(“outerHTML”);

printHtml = printHtml + “

“;

}

return printHtml;

}

3 调用打印功能。后面的location.reload()是放回之前的页面,

var printHtml = “”;

printHtml = creatTB(checkMsg);

window.document.body.innerHTML=printHtml;//需要打印的页面

setTimeout(function(){

window.print();

location.reload();

},500);

    原文作者:窦月汐
    原文地址: https://blog.csdn.net/weixin_34697393/article/details/118203685
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞