【工厂开发：使用扫码枪生成二维码并打印】使用扫码枪用JavaScript 生成二维码，并打印二维码

在厂里做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"), "http://www.runoob.com");// 设置要生成二维码的链接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包）

原文链接：https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html

<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "二维码内容");  // 设置要生成二维码的链接
</script>

打印内容到打印机：（原生JS）

原文链接：https://blog.csdn.net/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>