Bootstrap

js使用jquery qrcode批量打印带有二维码的页面

所需要引入的js

<script type="text/javascript" src="${contextPath}/statics/js/jquery.min.js"></script>
<script type="text/javascript" src="${contextPath}/statics/js/jquery.qrcode.min.js"></script>

实例

//这是打印按钮的点击事件
  function toprint(e){
	  var printHtml = "";
	  //这里是要打印的数据
	  printHtml = creatTB(${PISP_PutInStorageProductInfo});
	  window.document.body.innerHTML=printHtml;//需要打印的页面 
	  //设置延迟时间 这里的二维码转换成图片了 不转换成图片 扫不出来链接 不知道为啥 所以加了延迟时间 等待图片转换 要不然图片有可能是空的
	  setTimeout(function(){ 
			window.print();
			location.reload();
		},50);
	
	}

//这是处理打印页面的方法
  function creatTB(param){
		var printHtml = "";
		for(i=0;i<param.length;i++) {
			$("#productname").text(param[i].productname);
			$("#productvariety").text(param[i].productvariety);
			$("#produceddate").text(param[i].produceddate.substr(0,10));
			$("#selectsum").text(param[i].selectsum);
			$("#storagebatch").text("批次:"+param[i].storagebatch);
			//清空上一次生成的二维码
			$("#qrcode").text("");
			 //默认使用Canvas生成,并显示到图片 
			   var qrcode = $('#qrcode').qrcode("http://"+window.location.host+"/PolarStarInventory/productstorage/toQRCodeDetail?batch="+param[i].storagebatch).hide(); 
			   var canvas = qrcode.find('canvas').get(0);
			   //将二维码转换为图片
			   $('#qrcodeimg').attr('src',canvas.toDataURL('image/jpg'))
			printHtml = printHtml + $("#printDetailDiv").attr("outerHTML");
		}
		return printHtml;
	}

<!-- 打印明细窗口 隐藏了 因为是批量打印 以便循环利用-->
		<div  style="visibility:hidden; ">
			<div id="printDetailDiv" style="margin-left: 0px;margin-top: 0px;width: 100%; height: 100%;" >
				<table width="100%;" height="100%;" border="0" cellspacing="0" cellpadding="0" style="font-size:10px;">
					<tr style="text-align: left;">
						<td id="tdcode" rowspan="7">
						<div id="qrcode"></div>
						<img id="qrcodeimg" height="100" width="100"/>
						</td>
						<td>产品名称:</td>
						<td id="productname"></td>
					</tr>
					<tr style="text-align: left;">
						<td>产品品种:</td>
						<td id="productvariety"></td>
					</tr>
					<tr style="text-align: left;">
						<td>生产日期:</td>
						<td id="produceddate"></td>
					</tr>
					<tr style="text-align: left;">
						<td>产品规格:</td>
						<td id=""></td>
					</tr>
					<tr style="text-align: left;">
						<td>入库数量:</td>
						<td id="selectsum"></td>
					</tr>
					<tr style="text-align: left;">
						<td>采收部门:</td>
						<td id=""></td>
					</tr>
					<tr style="text-align: left;">
						<td>采收人员:</td>
						<td id=""></td>
					</tr>
					<tr style="text-align: left;font-size:15px;">
						<td colspan="3" id="storagebatch"></td>
					</tr>
					
				</table>
			</div>
		</div>
;