学习过程中将笔记整理跟大家分享，希望对大家也有所帮助，共同成长进步💪~\
如果大家喜欢，可以点赞或留言💕~~，谢谢大家⭐️⭐️⭐️~
html部分
<img class="imgs" src="../../img/qrcode.png" />
<div id="wimage">
</div>
<div id="qrcodeTable"></div>
<p class="aqw">Render in table</p>
<!--<div id="dayin">打印</div>-->
<input type="button" value="打印本页" onclick="printpage()" />js部分
$("#wimage").qrcode({
render: "canvas", //默认，可以不写
width: 100, //宽度
height: 100, //高度
text: "630null20220", //任意内容
colorDark: "#000000",
colorLight: "#ffffff",
});
//无法打印的解决办法
//var canvas = $('#wimage canvas');
//var img = canvas[0].toDataURL("image/png");
//$('#wimage').html("<img src='" + img + "'>");
//var str="Visit Runoob!";
//console.log(string.search(si))
function printpage() {
window.print()
}
var beforePrint = function() { //打印前
console.log('1111');
};
var afterPrint = function() { //打印完成后
console.log('22222');
};
//if(window.matchMedia) {
// var mediaQueryList = window.matchMedia('print');
// mediaQueryList.addListener(function(mql) {
// if(mql.matches) {
// beforePrint();
// } else {
// afterPrint();
// }
// });
//}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.aqw {
background-image: url(../../img/qrcode.png);
/*background: red;*/
}
.imgs {
width: 100px;
height: 80px;
}
</style>
<body>
<img class="imgs" src="../../img/qrcode.png" />
<div id="wimage">
</div>
<div id="qrcodeTable"></div>
<p class="aqw">Render in table</p>
<!--<div id="dayin">打印</div>-->
<input type="button" value="打印本页" onclick="printpage()" />
<script type="text/javascript" charset="utf-8" src="plug-in/qrcode/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="plug-in/qrcode/qrcode.min.js"></script>
<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://wow.techbrood.com/libs/jquery/jquery.qrcode.js"></script>
<script type="text/javascript" src="https://wow.techbrood.com/libs/jquery/qrcode.js"></script>
<script>
$("#wimage").qrcode({
render: "canvas", //默认，可以不写
width: 100, //宽度
height: 100, //高度
text: "630null20220", //任意内容
colorDark: "#000000",
colorLight: "#ffffff",
});
////无法打印的解决办法
//var canvas = $('#wimage canvas');
//var img = canvas[0].toDataURL("image/png");
//$('#wimage').html("<img src='" + img + "'>");
//var str="Visit Runoob!";
//console.log(string.search(si))
function printpage() {
window.print()
}
var beforePrint = function() { //打印前
console.log('1111');
};
var afterPrint = function() { //打印完成后
console.log('22222');
};
// if(window.matchMedia) {
// var mediaQueryList = window.matchMedia('print');
// mediaQueryList.addListener(function(mql) {
// if(mql.matches) {
// beforePrint();
// } else {
// afterPrint();
// }
// });
// }
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
</script>
</body>
</html>效果图：
我这里只是简单的写了一下demo，大家可以根据自己的需求更改哦，我这里的样式很丑请见谅~ ~ 我之前做的需求是打印卡片，卡片上有二维码和文字等信息，仅此参考。
