web使用window.print()实现分页批量打印。

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

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

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

 

功能描述：

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

知识点记录：

1. window.print()是调用浏览器本身的打印功能，打印的是当前页面的信息，所以打印之前需要重写当前页面的内容：用window.document.body.innerHTML。
2. 批量打印根据打印分页，使用<div  style='height：300px;page-break-after:always'></div>分页功能给需要打印的内容分页。
3. 图片加载：可以直接用img的src获取后台图片信息。需要注意的是，页面加载比访问数据来的快，如果图片是动态加载的话，可以设置setTimeout(function(){ window.print();  },500);来延迟打印功能，先让图片加载完。

代码：

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

<!-- 打印明细窗口 -->
		<div  style="visibility:hidden; ">
			<div id="printDetailDiv" style="margin-left: 50px; margin-top: 40px; width: 60%; height: 30%;border:1px solid #000" >
				<table style="margin-top: 50px; width : 100%; height: 80% ;border:1px solid #000">
					<tr >
						<th colspan="4" id = "th1"></th>
					</tr>
					<tr style=" text-align: center;height: 30px">
						<td>物料编码</td>
						<td id="td12"></td>
						<td>规格</td>
						<td id="td14"></td>
					</tr>
					<tr style=" text-align: center;height: 30px">
						<td>生产订单号</td>
						<td id="td22"></td>
						<td>数量</td>
						<td id="td24"></td>
					</tr>
					<tr style=" text-align: center;height: 30px">
						<td>研发编码</td>
						<td id="td32"></td>
						<td>BOM明细编号</td>
						<td id="td34"></td>
					</tr>
					<tr style=" text-align: center;" id = "imgTR">
						<td colspan="2" id = "img1"></td>
						<td colspan="2" id = "img2"></td>
					</tr>
					
				</table>
			</div>
		</div>

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

function creatTB(checkMsg){
		var printHtml = "";
		for(i=0;i<checkMsg.length;i++) {
			$("#th1").text(checkMsg[i].materialName);
			$("#td12").text(checkMsg[i].materialCode);
			$("#td14").text(checkMsg[i].spec);
			$("#td22").text(checkMsg[i].plodOrderId);
			$("#td24").text(checkMsg[i].amount);
			$("#td32").text(checkMsg[i].developCode);
			$("#td34").text(checkMsg[i].bomDetailId);
			$("#img1").html("<img src='${ctx}/sSupFinishedBarcodePrint/creatBarcode.do?barcode="+checkMsg[i].barcode +"' width='180px' height='80px'></img>");
			$("#img2").html("<img src='${ctx}/sSupFinishedBarcodePrint/picture.do?bomDetailId="+checkMsg[i].bomDetailId +"' width='180px' height='80px' ></img>");
			printHtml = printHtml + $("#printDetailDiv").prop("outerHTML");
			printHtml = printHtml + "<div id='page1' style='height：300px;page-break-after:always'></div>";
			
		}
		return printHtml;
	}

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

var printHtml = "";
				printHtml = creatTB(checkMsg);
				window.document.body.innerHTML=printHtml;//需要打印的页面 
				setTimeout(function(){ 
					window.print();
					location.reload();
				},500);