直接上代码，不废话。直接复制就可以成功。qrcode去github下载：https://github.com/davidshimjs/qrcodejs
<script type="text/javascript" src="js/qrcode.min.js"></script> <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <body> <input id="text" type="hidden" value="http://www.baidu.com" /> <input id="text2" type="hidden" value="http://www.yahoo.com" /> <input id="text3" type="hidden" value="http://www.sina.com.cn" /> <center> <div style="margin-top:85px;"> <div style="float:left;margin-right:50px;margin-left:50px;"> <b style="margin-bottom:10px;display:block">百度网站二维码</b> <div class="box" id="qrcode2" style="240px; height:240px;"></div><a><div style="margin-top:20px" onclick="printPhoto('qrcode2','百度网站二维码')"><b>下载</b></div></a> </div> <div style="float:left;margin-right:50px;margin-left:50px;"> <b style="margin-bottom:10px;display:block">yahoo网站二维码</b> <div class="box" id="qrcode" style="240px; height:240px;"></div><a><div style="margin-top:20px" onclick="printPhoto('qrcode','yahoo网站二维码')"><b>下载</b></div></a> </div> <div style="float:left;margin-right:50px;margin-left:50px;"> <b style="margin-bottom:10px;display:block">新浪网站二维码</b> <div class="box" id="qrcode3" style="240px; height:240px;"></div><a><div style="margin-top:20px" onclick="printPhoto('qrcode3','新浪网站二维码')"><b>下载</b></div></a> </div> </div> </center> <script type="text/javascript"> $(function () { //第一个二维码 var qrcode = new QRCode(document.getElementById("qrcode"), { width : 240, height: 240, correctLevel: 3 }); makeCode(qrcode, 'text'); //$("#qrcode").removeAttr("title"); //end //第二个二维码 var qrcode2 = new QRCode(document.getElementById("qrcode2"), { width : 240, height: 240, correctLevel: 3 }); makeCode(qrcode2, 'text2'); //$("#qrcode2").removeAttr("title"); //end //第三个二维码 var qrcode3 = new QRCode(document.getElementById("qrcode3"), { width : 240, height: 240, correctLevel: 3 }); makeCode(qrcode3, 'text3'); //$("#qrcode3").removeAttr("title"); //end }) //生成二维码 function makeCode (qrcode,divid) { var elText = document.getElementById(divid); qrcode.makeCode(elText.value); } </script> <script> //这是将html传化为图片的方法 function printPhoto(tab,picname){ html2canvas(document.querySelector("#"+tab)).then(canvas => { // 图片导出为 png 格式 var type = 'png'; var imgData = canvas.toDataURL(type); var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r; }; // 加工image data，替换mime type imgData = imgData.replace(_fixType(type),'image/octet-stream'); //console.log(imgData); var saveFile = function(data, filename){ var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); save_link.href = data; save_link.download = filename; var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); save_link.dispatchEvent(event); }; // 下载后的文件名 var filename = picname + '.' + type; // download saveFile(imgData,filename); }); } </script> </body>