在厂里做erp，有要求写一个扫码枪扫描二维码生成的demo，并用打印机打印出来。
需求：
1. 使用扫码枪扫描二维码，获取内容
2. 把内容转成二维码显示到页面
3. 打印这个二维码
使用扫码枪扫描二维码会产生二维码内容的格式：
QR026;二维码内容, 例：QR026;1.03.01.S0578M018:M:75:0004, （扫码枪编号+分号+二维码内容+逗号）
使用到的类库有：jQuery，qrcode两个。（jquery.min.js 和 qrcode.js）
<!DOCTYPE html><html><head><meta charset="UTF-8"><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/qrcode.js"></script><title>index从这开始</title></head><body>请进行操作：<input type="button" value="扫描" onclick="scan()"><input type="button" value="获取扫描的内容" onclick="getScanValue()"><input type="button" value="手动输入条码" onclick="inputScanValue()"><input type="button" value="打印二维码" onclick="doPrint()"><span id="scan_msg" style="display:none;">等待扫描......</span><input id="text_code" style="width:10px;position: absolute;top:-200px;"><!--startprint--><div id="qrcode"></div><!--endprint--></body><script type="text/javascript">//new QRCode(document.getElementById("qrcode"), "");// 设置要生成二维码的链接var scanFunction=null;//定义一个空函数//扫描function scan(){$("#text_code").val("")document.getElementById("text_code").focus();$("#scan_msg").show();$("#scan_msg").text("等待扫描......");//用Interval函数不断扫描扫码枪的输入值scanFunction=setInterval(function(){var elText =$("#text_code").val();//不为空并且最后一个字符为逗号才进行生成二维码if(elText!="" && elText.slice(elText.length-1,elText.length)==","){$("#scan_msg").text("扫描完成！");makeCode();}else{}},3000);}//手动输入扫描条码值function inputScanValue(){var inputScanValue = prompt("请输入条码值：","1.03.01.S0578M018:M:75:0004");//如果返回的有内容if(inputScanValue){$("#scan_msg").show();//扫码枪模拟分号和逗号$("#text_code").val(";"+inputScanValue+",");$("#scan_msg").text("完成！");makeCode();} else {}}//过滤文字function fiterText(oldText){//扫描出的文字例子：QR026;1.03.01.S0578M018:M:75:0004,//过滤扫码枪编号和最后一个逗号var return_text=oldText.slice(oldText.indexOf(";")+1,oldText.length-1);return return_text;}//获取扫描的文字function getScanValue(){//获取title属性的值var scanedText =$("#qrcode").attr("title");alert(scanedText);}var qrcode = new QRCode("qrcode");//生成二维码function makeCode () { var elText =$("#text_code").val();if (elText==null | elText=="") {$("#text_code").focus();return;}qrcode.clear(); //清除之前的二维码数据var fiterText_value=fiterText(elText);//改变title值$("#qrcode").css("title",fiterText_value);qrcode.makeCode(fiterText_value);clearInterval(scanFunction);//清除Interval函数}//打印function doPrint() {var bdhtml=window.document.body.innerHTML;sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符eprnstr="<!--endprint-->"; //结束打印标识字符串prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容window.document.body.innerHTML=prnhtml; //把需要打印的指定内容赋给body.innerHTMLwindow.print(); //调用浏览器的打印功能打印指定区域window.document.body.innerHTML=bdhtml; // 最后还原页面}</script></html>
使用到的技术很简单，就几行代码，但是做完了这demo就得摸鱼了，不如加代码优化体验，就有了如上的代码。
页面效果图：
点击【手动输入条码】：
点击【打印二维码】：
原本关键代码如下：
把文字内容转为二维码图片：（先导入QRCode.js包）
原文链接：/w3cnote/javascript-qrcodejs-library.html
<div id="qrcode"></div><script type="text/javascript">new QRCode(document.getElementById("qrcode"), "二维码内容"); // 设置要生成二维码的链接</script>
打印内容到打印机：（原生JS）
原文链接：/weixin_43292447/article/details/83993416
<!--startprint--><div id="qrcode">我就是要打印的内容</div><!--endprint--><!--上面是div，下面是js--><script type="text/javascript">//打印function doPrint() {var bdhtml=window.document.body.innerHTML;sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符eprnstr="<!--endprint-->"; //结束打印标识字符串prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容window.document.body.innerHTML=prnhtml; //把需要打印的指定内容赋给body.innerHTMLwindow.print(); //调用浏览器的打印功能打印指定区域window.document.body.innerHTML=bdhtml; // 最后还原页面}</script>
【工厂开发：使用扫码枪生成二维码并打印】使用 扫码枪用JavaScript 生成二维码 并打印二维码
