所需要引入的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>