项目中需要用到一个生成二维码并打印的功能，具体需求是在点下按钮，生成二维码，同时调用浏览器的打印功能，进行打印。用的是JQuery.qrcode和JQuery.printArea，但是遇到了一个问题，就是这个二维码在打印预览中怎么都不显示。
来看看具体怎么实现：（所有我认为需要解释的都在代码中注释了，大家可以直接查看代码，有问题可以在文末留言~）
<!-- 代码片作者：Carl Zhang，转载请注明。 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-2.2.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.qrcode.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.PrintArea.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function f_print() {
// 从文本框中获取文字
var item = document.getElementById("print_value").value;
f_generateQRCode(item);
}
function f_generateQRCode(item) {
// 每次执行前先清空原有的二维码
jQuery('#QRCode').html('');
jQuery('#showQRCode').html('');
// 转码中文，确保生成的二维码扫描以后中文不会变成乱码
var print = utf16to8(item);
// 创建一个img元素用于存放图片形式的二维码
var img = document.createElement("img");
// 创建一个div元素用于存放生成二维码的文字
var textDiv = document.createElement("div");
// 创建一个div元素用于存放上面那个img元素，以方便控制样式
var imgDiv = document.createElement("div");
// 设置img和文字div的样式
img.style = 'text-align: center; width: 50%;';
textDiv.style = 'text-align: center; width: 100%;font-size:30px';
// 利用jquery.qrcode在id为“showQRCode”的div中生成一个canvas格式的二维码
jQuery('#showQRCode').qrcode({width:200,height:200,correctLevel:0,text:print});
// 对生成的canvas添加id
$("canvas").attr("id","qrcode_canvas");
// 根据刚才添加的id获取canvas元素
var canvas = document.getElementById("qrcode_canvas");
// 利用toDataURL函数将canvas中的二维码转换成base64形式
var strDataURI = canvas.toDataURL("image/png");
// 更改img的src属性为上方的这个base64
img.src = strDataURI;
// 将文字添加到文字div中
textDiv.innerText=item;
// 将img元素放入到imgDiv中
jQuery(imgDiv).append(img);
// 将imgDiv元素放入id为“QRCode”的div中，下同，不再叙述
jQuery('#QRCode').append(imgDiv);
jQuery('#QRCode').append('<br/>');
jQuery('#QRCode').append(textDiv);
jQuery('#QRCode').append('<br/>');
// 打印二维码所在区域
$("#QRCode").printArea();
}
// 转换中文, 避免二维码扫描出来中文是乱码的情况（此函数来自网络）
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;
}
</script>
<!-- 若不想让这些二维码在页面中显示，可以利用以下css -->
<!-- 但是必须设置@media print的样式将需要打印的部分显示出来-->
<!-- 否则打印的时候会不显示 -->
<!--
<style>
#QRCode {
display:none;
}
#showQRCode {
display:none;
}
@media print {
#QRCode {
display: block;
}
}
</style>
-->
</head>
<body>
<div>
<input type="text" name="print_value" id="print_value" value="" />
<button type="button" onclick="f_print()">打印</button>
</div>
<br>
<div>通过JQuery.qrcode直接生成的二维码：</div>
<div style="text-align: center" id="showQRCode"></div>
<br>
<div>转换成图片以后的二维码：</div>
<div style="text-align: center" id="QRCode"></div>
</body>
</html>具体效果：
页面上不显示二维码的效果：
（本文为作者原创。转载请注明：转自carlzhang.xyz）