在公司的生產現場中，常常會在一些部品或設備上貼上二維碼，用於掃描錄入數據，免去手動輸入的麻煩。
以前曾經做過winform的程序，生成二維碼，並打印出來，使用的是zxing的類庫，
但是如果二維碼是附在其他界面上的，使用winform就需要用到Graphics的方法，但是這個方法很難繪制出想要的效果，並且不容易修改。
后來，發現html靜態網頁能生成二維碼，並且界面排版簡單，就使用jquery.qrcode生成二維碼，
打印的時候，使用jqprint，打印指定的div就可以了，非常方便。
下面分享一個本人作成的測試樣例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>JQuery QRcode</title>
5 <style>
6 @media screen 7 {
8 #canvas 9 { 10 display: block;
11 }
12 #image 13 {
14 display: none;
15 }
16 } 17 @media print 18 {
19 #canvas 20 { 21 display: none;
22 }
23 #image 24 {
25 display: block;
26 }
27 } 28 </style>
29
30 <script src="jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
31
32 <script src="jquery/jquery.qrcode.min.js" type="text/javascript"></script>
33
34 <script src="jquery/jquery.jqprint-0.3.js" type="text/javascript"></script>
35
36 <script>
37 function encode(){ 38 $("#code").html(''); 39 var str=$('#txt').val(); 40 str=toUtf8(str); 41 //$('#code').qrcode(str);
42 $("#code").qrcode({ 43 render: "canvas", //table方式
44 width: 100, //寬度
45 height:100, //高度
46 text: str //任意內容
47 }); 48 } 49
50 function toUtf8(str) { 51 var out, i, len, c; 52 out = ""; 53 len = str.length; 54 for(i = 0; i < len; i++) { 55 c = str.charCodeAt(i); 56 if ((c >= 0x0001) && (c <= 0x007F)) { 57 out += str.charAt(i); 58 } else if (c > 0x07FF) { 59 out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); 60 out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); 61 out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); 62 } else { 63 out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); 64 out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); 65 } 66 } 67 return out; 68 } 69
70 function print(){ 71 var img = document.getElementById("image"); /// get image element
72 var canvas = document.getElementsByTagName("canvas")[0]; /// get canvas element
73 img.src = canvas.toDataURL(); /// update image
74
75 $("#image").jqprint({ 76 debug:false, 77 importCSS:true, 78 printContainer:true, 79 operaSupport:false
80 }); 81 } 82 </script>
83
84 </head>
85 <body>
86 <input type="text" id="txt" />
87 <button id="btnEncode" onclick="encode();">
88 生成QRcode</button>
89 <button id="btnPrint" onclick="print();">
90 打印</button>
91 <hr />
92 <div id="code">
93 </div>
94 <img id="image" src="" />
95 </body>
96 </html>
簡單說明一下：
encode方法是在#code的標簽上生成二維碼的，其中調用了toUtf8的函數，這是使中文可以正常編譯為二維碼的方法；
print方法就是打印了，需要說明的是，canvas標簽並不能直接打印，因為是動態的，打印會顯示空白，
我這里是借用了一個img標簽，先把canvas圖像賦予給img，再打印img，由於上方有定義img標簽的display屬性為none，所以不會顯示。
注意：71行和72行，標簽選擇方法盡量不使用jquery，本人試過使用$選擇器，但提示對象無法調用toDataURL()，大概是jquery沒有這個屬性吧，所以需要用javascript的選擇方法，這個問題，困擾了我很久。
jquery.qrcode二維碼的生成方法是，在#code的div中，生成一個canvas的動畫，
43行的渲染方法，可以改為“table”，那就是在#code的div中生成一個table，通過調整樣式，使td顯示出一個個黑點的二維碼，但這個方式無法打印，因為不是圖像，不能轉移為img。
代碼頁面的效果如下：
使用以上的方法，還能在div的其他地方添加其他元素，就能生成自己想要的圖像了。