掃碼槍相當于鍵盤輸入設備，輸入一連串數字后加一個enter鍵。

但在實際開發中需要區分是掃描槍輸入還是鍵盤用戶輸入，區別在于掃碼槍輸入很快

1.獲取掃碼槍掃碼的數據

// 監聽掃碼window.document.onkeypress = (e) => {if (window.event) {// IEthis.nextCode = e.keyCode;} else if (e.which) {// Netscape/Firefox/Operathis.nextCode = e.which;}if (e.which === 13) {// 鍵盤回車事件if (this.code.length < 3) return; // 掃碼槍的速度很快，手動輸入的時間不會讓code的長度大于2，所以這里不會對掃碼槍有效this.parseQRCode(this.code); // 獲取到掃碼槍輸入的內容，做別的操作this.lastCode = "";this.lastTime = "";return;}this.nextTime = new Date().getTime();if (this.lastCode &&this.lastTime &&this.nextTime - this.lastTime > 500) {// 當掃碼前有keypress事件時,防止首字缺失this.code = e.key;} else if (this.lastCode && this.lastTime) {this.code += e.key;}this.lastCode = this.nextCode;this.lastTime = this.nextTime;};

this.parseQRCode這個函數是獲取到掃碼的數據進行處理，我這邊的邏輯是要拿到他請求后臺數據拿到條形碼

parseQRCode(code) {this.addCodeInfo.DoType = "1";if (code) {this.addCodeInfo.VehicleCode = code;this.code = "";}if (!this.addCodeInfo.VehicleCode) {this.$message({message: "請輸入車架編號",type: "warning",});return;getCodeApi(this.addCodeInfo).then((res) => {if (res.Code == "0") {this.QrCode = res.QrCode;if (this.isPrint) {this.$nextTick(() => {this.printFn();//這是打印的方法});}this.$message({message: res.Message,type: "success",});}}).catch((e) => {console.log("e", e);});},

UI部分

<template><div id="printAreass" class="contents"><div><span class="printTitle">請勿撕毀 以便保修</span><img :src="QrCode" class="QrCode-img" alt="條形碼" /><span class="printTitle">{{ addCodeInfo.VehicleCode }}</span></div></div></template>

2.實現掃碼之后立即打印

printFn() {//給要打印的內容加樣式const styleSheet = `<style>body{margin: 0 0}.contents {display: flex;flex-direction: column;display: block;width: 250px;height: 100px;background-color: #fff;text-align: center;margin: 0 auto;page-break-after:always}.printTitle{font-size: 17px; font-weight: bold; color: black;}.QrCode-img {width: 250px;margin: 3px 0;}</style>`;var newWin = window.open(""); // 新打開一個空窗口var imageToPrint = document.getElementById("printAreass"); // 獲取需要打印的內容newWin.document.write(imageToPrint.outerHTML); // 將需要打印的內容添加進新的窗口newWin.document.head.innerHTML = styleSheet; // 給打印的內容加上樣式newWin.document.close(); // 在IE瀏覽器中使用必須添加這一句newWin.focus(); // 在IE瀏覽器中使用必須添加這一句setTimeout(function () {newWin.print(); // 打開打印窗口newWin.close(); // 關閉打印窗口}, 100);},

效果展示：

?

3.批量打印

我這用的是element-ui的表單，多選，全選

?UI部分

<template><divv-for="(item, index) in multipleSelection":id="'content' + index":key="index"class="content"><div><span class="printTitle">請勿撕毀 以便保修</span><img :src="item.QrCode" class="QrCode-img" alt="條形碼" /><span class="printTitle">{{ item.VehicleCode }}</span></div></div></template>

邏輯部分

batchPrint() {if (this.multipleSelection.length == 0) {this.$message({message: "請選擇要打印的數據",type: "warning",});return;}const styleSheet = `<style>body{margin: 0 0}.content {display: flex;flex-direction: column;display: block;width: 250px;height: 100px;background-color: #fff;text-align: center;margin: 0 auto;page-break-after:always}.printTitle{font-size: 17px; font-weight: bold; color: black;}.QrCode-img {width: 250px;margin: 3px 0;} </style>`;const data = this.multipleSelection;// 打印var newWin = window.open(""); // 新打開一個空窗口data.forEach((item, i) => {var imageToPrint = document.getElementById("content" + i); // 獲取需要打印的內容newWin.document.write(imageToPrint.outerHTML); // 將需要打印的內容添加進新的窗口});newWin.document.head.innerHTML = styleSheet; // 給打印的內容加上樣式newWin.document.close(); // 在IE瀏覽器中使用必須添加這一句newWin.focus(); // 在IE瀏覽器中使用必須添加這一句setTimeout(function () {newWin.print(); // 打開打印窗口newWin.close(); // 關閉打印窗口if (newWin.closed) {this.$refs.multipleTable.clearSelection();}}, 100);},

效果展示：

單個打印和多個打印其實都一樣，多個打印只是循環了一下而已

這個功能是做工廠出貨之后掃碼溯源的功能，

總結

以上是生活随笔為你收集整理的js前端获取扫码枪扫描的数据，打印条形码，批量打印的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。