本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
学习过程中将笔记整理跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~
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，大家可以根据自己的需求更改哦，我这里的样式很丑请见谅~ ~ 我之前做的需求是打印卡片，卡片上有二维码和文字等信息，仅此参考。
评论抽奖
欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边
- 抽奖礼物：100份，掘金官方提供，包括掘金徽章、拖鞋、马克杯、帆布袋等，随机发放
- 抽奖时间：「掘力星计划」活动结束后，预计3个工作日内，官方将在所有符合规则的活动文章评论区抽出
- 抽奖方式：掘金官方随机抽奖+人工核实
- 评论内容：与文章内容相关的评论、建议、讨论等，「踩踩」「学习了」等泛泛类的评论无法获奖
专栏推荐
推荐一下自己的专栏，欢迎大家收藏关注😊~
