本文參考這個而來：https://www.cnblogs.com/chenyucong/p/5996544.html
使用的js有三個，第一個是jquery，放在第一位，第二個是二維碼生成插件jquery.qrcode.js，第三個是打印插件jquery.jqprint-0.3.js
下面是一個簡單的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二維碼</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script src="../js/jquery.jqprint-0.3.js"></script>
<style>
@media screen
{
#canvas
{
display: block;
}
img
{
display: none;
}
}
/*打印狀態下的樣式*/
@media print
{
#canvas
{
display: none;
}
img
{
display: block;
}
}
</style>
</head>
<body>
<input type="text" id="txt">
<button id="btnEncode">生成二維碼</button>
<button id="btnPrint" >打印</button>
<hr />
<div id="code"></div>
<img id="image" src="" />
</body>
</html>
<script>
$(function () {
//生成二維碼
$("#btnEncode").click(function () {
$("#code").empty();
var str = $('#txt').val();
str=toUtf8(str);
$("#code").qrcode({
render: "canvas", //table方式
width: 200, //寬度
height:200, //高度
text: str //任意內容
});
});
//識別中文
function toUtf8(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;
}
//打印
$("#btnPrint").click(function () {
//這里不能使用jq的選擇器來獲取，不然報錯
var img = document.getElementById("image"); // get image element
var canvas = document.getElementsByTagName("canvas")[0]; // get canvas element
//var img = $("#image");
//var canvas = $("canvas");
img.src = canvas.toDataURL(); // update image
$("#image").jqprint({
debug:false,
importCSS:true,
printContainer:true,
operaSupport:false
});
});
})
</script>
第一點：
canvas標簽並不能直接打印，因為是動態的，打印會顯示空白，
這里是借用了一個img標簽，先把canvas圖像賦予給img，再打印img，由於上方有定義img標簽的display屬性為none，所以不會顯示。
第二點：
在84和85行，獲取canvas和img的標簽時，不能使用jq來獲取，不然會報錯，錯誤如下
第三點：
render的屬性可以改為table，但是改為table的時候，無法打印，因為不是圖像，不能轉移為img。
最終效果圖如下：
點擊生成二維碼圖
點擊打印圖