jquery.qrcode 批量列印
公司讓做一個二維碼批量列印功能,上網上找資料找了半天,都沒有介紹關於怎麼利用jquery.qrcode進行批量列印的,沒辦法只能自己想辦法了。網上的都是利用
jQuery('#output').qrcode({width:200,height:200,correctLevel:0,text:content});
這種通過id來進行生成二維碼的,這種情況只能生成一個,那麼通過什麼辦法生成多個呢?
既然能通過獲取id的方式生成二維碼,那麼我在js中通過for迴圈生成div,然後給這個id賦值,然後再呼叫上面的那個語句是否可以生成呢,當然id是一個變數。沒想到竟然成功了,記錄下來程式碼:
<div >
<div class="float-right">
<button type="button" id="btnSave" onclick="PrintArticle()" runat="server" >列印</button>
</div>
</div>
<div id="qrcode">
</div>
<!-- 二維碼控制元件 -->
<script type="text/javascript" src="scripts/jquery/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.qrcode.min.js"></script>
<script src="scripts/jquery.jqprint-0.3.js"></script>
<script>
for (var i = 0; i < 10; i++) {
$("#qrcode").append("<div>woshi dddee<br/><img id='x" + i + "' width='120px;' src='' /><div id='" + i + "'></div> </div>");///必須加一個image,不加在列印的時候沒值。不相信可以將PrintArticle
$('#' + i).qrcode(utf16to8(i.toString() +"中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人中國人"));
var img = document.getElementById("x" + i.toString()); /// get image element
var canvas = document.getElementsByTagName("canvas")[i]; /// get canvas element
canvas.style="display:none";///將生成的隱藏起來。
img.src = canvas.toDataURL(); /// update image
}
function utf16to8(str) {
var out, i, len, c;
out = "";
len = str.length;
for (i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
function PrintArticle() {
$("#qrcode").jqprint({
debug:false,
importCSS:true,
printContainer:true,
operaSupport:false
});
//var pc = document.getElementById("qrcode");
//var pw = window.open('', '', 'width=500,height=400');
//pw.document.write('<html>');
//pw.document.write('<head>');
//pw.document.write('<title>ASP.NET網頁列印測試</title>');
//pw.document.write('</head>');
//pw.document.write('<body>');
//pw.document.write(pc.innerHTML);
//pw.document.write('</body>');
//pw.document.write('</html>');
//pw.document.close();
//setTimeout(function () {
// pw.print();
//}, 500);
return false;
}
</script>