vue单据打印一维码、二维码实现

编码规则与 JavaScript 代码实现 编码规则数组：定义了 Code 128 条形码编码规则数组 BARS，其中每个数字对应一种条形码的线条组合模式。 const BARS = [212222,222122,222221,121223,121322,131222,122213,122312,132212,221213,221312,231212,112232,122132,122231,113222,123122,123221,223211,221132,221231,213212,223112,312131,311222,321122,321221,312212,322112,322211,212123,212321,232121,111323,131123,131321,112313,132113,132311,211313,231113,231311,112133,112331,132131,113123,113321,133121,313121,211331,231131,213113,213311,213131,311123,311321,331121,312113,312311,332111,314111,221411,431111,111224,111422,121124,121421,141122,141221,112214,112412,122114,122411,142112,142211,241211,221114,413111,241112,134111,111242,121142,121241,114212,124112,124211,411212,421112,421211,212141,214121,412121,111143,111341,131141,114113,114311,411113,411131,113141,114131,311141,411131,211412,211214,211232,23311120];

起始码与结束码常量：定义了起始码的基础值 START_BASE 和结束码值 STOP。

const START_BASE = 38; const STOP = 106;

生成条形码 HTML 代码的函数：code128 函数根据输入的条形码内容和类型生成对应的 HTML 代码。如果未指定条形码类型，会自动检测。对于类型为 C 且长度为奇数的条形码内容，会在前面补 0。

function code128(code, barcodeType) { if (arguments.length < 2) { barcodeType = code128Detect(code); } if (barcodeType === 'C' && code.length % 2 === 1) { code = '0' + code; } const bars = parseBarcode(code, barcodeType); return bar2html(bars.join('')); }

将条形码编码转换为 HTML 元素的函数：bar2html 函数将条形码编码数组转换为 HTML 元素字符串，每个编码对应一个包含线条和间隔样式的

元素。 javascript function bar2html(s) { const elements = []; for (let pos = 0; pos < s.length; pos += 2) { elements.push( <div class="bar${s.charAt(pos)} space${s.charAt(pos + 1)}"></div>); } return elements.join(‘’); } 检测条形码类型的函数：code128Detect 函数根据输入的条形码内容检测其类型，纯数字为 C 型，包含小写字母为 B 型，其他为 A 型。

function code128Detect(code) { if (/^[0-9]+$/.test(code)) return 'C'; if (/[a-z]/.test(code)) return 'B'; return 'A'; }

解析条形码字符串的函数：parseBarcode 函数解析条形码字符串，根据条形码类型进行字符编码转换，并计算校验码。最后添加起始码、校验码和结束码到条形码编码数组。 javascript

function parseBarcode(barcode, barcodeType) { const bars = []; let check = 0; // 添加起始码 bars.push(BARS[START_BASE + barcodeType.charCodeAt(0)]); for (let i = 0; i < barcode.length; i++) { let code; if (barcodeType === 'C') { code = +barcode.substr(i++, 2); } else { code = barcode.charCodeAt(i); } const converted = fromType[barcodeType](code); if (isNaN(converted) || converted < 0 || converted > 106) { throw new Error(`Unrecognized character (${code}) at position ${i} in code '${barcode}'.`); } check = bars.length === 0? converted : check + converted * bars.length; bars.push(BARS[converted]); } // 添加校验码和结束码 bars.push(BARS[check % 103], BARS[STOP]); return bars; } 字符编码转换函数对象：fromType 对象包含了不同条形码类型的字符编码转换函数。 javascript const fromType = { A: function(charCode) { if (charCode >= 0 && charCode < 32) return charCode + 64; if (charCode >= 32 && charCode < 96) return charCode - 32; return charCode; }, B: function(charCode) { if (charCode >= 32 && charCode < 128) return charCode - 32; return charCode; }, C: function(charCode) { return charCode; } };

将 code128 函数挂载到 window 对象：使 code128 函数在全局可用。

window.code128 = code128; HTML 与 CSS 样式 HTML 结构：在 HTML 页面中，使用一个 div 元素（id=“barCodeDiv”）来显示生成的条形码。 html <div class="left marginleft"> <div class="barcode2" id="barCodeDiv"></div> </div>

同时，通过一个隐藏的 input 元素（id=“barCodeValue”）获取要生成条形码的内容。 html CSS 样式：定义了用于显示条形码的样式类，包括线条的宽度和间隔的大小。 css

.barcode2 { float: left; clear: both; overflow: auto; height: 1in; } .barcode2 + * { clear: both; } .barcode2 div { float: left; height: 0.7in; } .barcode2.bar1 { border-left: 2px solid black; } .barcode2.bar2 { border-left: 4px solid black; } .barcode2.bar3 { border-left: 6px solid black; } .barcode2.bar4 { border-left: 8px solid black; } .barcode2.space0 { margin-right: 0; } .barcode2.space1 { margin-right: 2px; } .barcode2.space2 { margin-right: 4px; } .barcode2.space3 { margin-right: 6px; } .barcode2.space4 { margin-right: 8px; } .barcode2 label { clear: both; display: block; text-align: center; font: 0.250in/100% helvetica; } 最终渲染 通过以下 JavaScript 代码获取隐藏 input 元素中的值，并使用 code128 函数生成条形码 HTML 代码，插入到指定的 div 元素中。 const divElement = document.getElementById("barCodeDiv"); const v = document.getElementById("barCodeValue").value; if (v) { divElement.innerHTML = code128(v, "B"); }

通过以上步骤，在 HTML 页面中实现了 Code 128 一维码的生成与显示。 html 删除其他无关代码，只保留一维码部分

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Code 128 Barcode</title> <style type="text/css"> .barcode2 { float: left; clear: both; overflow: auto; height: 1in; } .barcode2 + * { clear: both; } .barcode2 div { float: left; height: 0.7in; } .barcode2.bar1 { border-left: 2px solid black; } .barcode2.bar2 { border-left: 4px solid black; } .barcode2.bar3 { border-left: 6px solid black; } .barcode2.bar4 { border-left: 8px solid black; } .barcode2.space0 { margin-right: 0; } .barcode2.space1 { margin-right: 2px; } .barcode2.space2 { margin-right: 4px; } .barcode2.space3 { margin-right: 6px; } .barcode2.space4 { margin-right: 8px; } .barcode2 label { clear: both; display: block; text-align: center; font: 0.250in/100% helvetica; } </style> </head> <body> <div class="left marginleft"> <div class="barcode2" id="barCodeDiv"></div> </div> <input id="barCodeValue" type="hidden" value="SCMRMEGA1904128156"> <script> (function () { // Code 128 条形码编码规则数组 const BARS = [212222, 222122, 222221, 121223, 121322, 131222, 122213, 122312, 132212, 221213, 221312, 231212, 112232, 122132, 122231, 113222, 123122, 123221, 223211, 221132, 221231, 213212, 223112, 312131, 311222, 321122, 321221, 312212, 322112, 322211, 212123, 212321, 232121, 111323, 131123, 131321, 112313, 132113, 132311, 211313, 231113, 231311, 112133, 112331, 132131, 113123, 113321, 133121, 313121, 211331, 231131, 213113, 213311, 213131, 311123, 311321, 331121, 312113, 312311, 332111, 314111, 221411, 431111, 111224, 111422, 121124, 121421, 141122, 141221, 112214, 112412, 122114, 122411, 142112, 142211, 241211, 221114, 413111, 241112, 134111, 111242, 121142, 121241, 114212, 124112, 124211, 411212, 421112, 421211, 212141, 214121, 412121, 111143, 111341, 131141, 114113, 114311, 411113, 411131, 113141, 114131, 311141, 411131, 211412, 211214, 211232, 23311120]; const START_BASE = 38; const STOP = 106; // 生成 Code 128 条形码 HTML 代码 function code128(code, barcodeType) { if (arguments.length < 2) { barcodeType = code128Detect(code); } if (barcodeType === 'C' && code.length % 2 === 1) { code = '0' + code; } const bars = parseBarcode(code, barcodeType); return bar2html(bars.join('')); } // 将条形码编码转换为 HTML 元素 function bar2html(s) { const elements = []; for (let pos = 0; pos < s.length; pos += 2) { elements.push(`<div class="bar${s.charAt(pos)} space${s.charAt(pos + 1)}"></div>`); } return elements.join(''); } // 检测条形码类型 function code128Detect(code) { if (/^[0 - 9]+$/.test(code)) return 'C'; if (/[a - z]/.test(code)) return 'B'; return 'A'; } // 解析条形码字符串 function parseBarcode(barcode, barcodeType) { const bars = []; let check = 0; // 添加起始码 bars.push(BARS[START_BASE + barcodeType.charCodeAt(0)]); for (let i = 0; i < barcode.length; i++) { let code; if (barcodeType === 'C') { code = +barcode.substr(i++, 2); } else { code = barcode.charCodeAt(i); } const converted = fromType[barcodeType](code); if (isNaN(converted) || converted < 0 || converted > 106) { throw new Error(`Unrecognized character (${code}) at position ${i} in code '${barcode}'.`); } check = bars.length === 0? converted : check + converted * bars.length; bars.push(BARS[converted]); } // 添加校验码和结束码 bars.push(BARS[check % 103], BARS[STOP]); return bars; } // 字符编码转换函数 const fromType = { A: function (charCode) { if (charCode >= 0 && charCode < 32) return charCode + 64; if (charCode >= 32 && charCode < 96) return charCode - 32; return charCode; }, B: function (charCode) { if (charCode >= 32 && charCode < 128) return charCode - 32; return charCode; }, C: function (charCode) { return charCode; } }; // 将 code128 函数挂载到 window 对象上 window.code128 = code128; })(); const divElement = document.getElementById("barCodeDiv"); const v = document.getElementById("barCodeValue").value; if (v) { divElement.innerHTML = code128(v, "B"); } </script> </body> </html>

vue打印代码

let newOpen = window.open() newOpen.document.write(this.html) setTimeout(() => { newOpen.window.print() // 如果直接关窗口，弹警告 if (newOpen.closed) { // 请勿直接关闭打印窗口 alert(this.$t('MSG040005')) return } // 打印或取消，自动关闭新窗口 newOpen.close() }, 100) document.body.innerHTML = this.html console.log(this.html) window.print() setTimeout(() => { window.location.reload() }, 100)

区别总结 窗口操作：第一段代码打开一个新的窗口进行打印，不会影响当前页面；第二段代码直接在当前页面进行打印，并在打印完成后重新加载页面。 页面内容处理：第一段代码将内容写入新窗口，不改变当前页面的内容；第二段代码直接替换当前页面的 body 内容。 用户体验：第一段代码提供了一个独立的打印窗口，用户可以在不影响当前页面的情况下进行打印操作；第二段代码会临时改变当前页面的内容，可能会给用户带来一些干扰。 综上所述，选择使用哪段代码取决于具体的需求和场景。如果需要独立的打印环境，避免影响当前页面，建议使用第一段代码；如果需要临时修改当前页面内容进行打印，并且希望打印完成后恢复页面状态，可以使用第二段代码。 如下是二维码的生成代码

<input id="barCodeValue" value="110000918" type="hidden" th:value="${runcardId}"/> <script> // 生成第二个二维码 var qrcodeDiv2 = document.getElementById("barCodeDiv"); var v1 = document.getElementById("barCodeValue").value; if (v1!== '') { var qr = new QRCode(qrcodeDiv2, { text: v1, width: 130, // 设置二维码的宽度，可根据需要调整 height: 130, // 设置二维码的高度，可根据需要调整 }); } </script> <div class="barcode"style="height:150px;width: 150px" id="barCodeDiv"></div> #barCodeDiv { position: absolute; top: 0; right: 0; } .barcode { float: left; clear: both; padding: 0; /*quiet zone*/ overflow: auto; /*height:0.5in;!*size*!*/ } .barcode { float:left; clear:both; padding: 0; /*quiet zone*/ overflow:auto; /*height:0.5in; !*size*!*/ } .right { float:right; } .barcode + * { clear:both; } .barcode div { float:left; height: 0.35in; /*size*/ } .barcode .bar1 { border-left:1px solid black; } .barcode .bar2 { border-left:2px solid black; } .barcode .bar3 { border-left:3px solid black; } .barcode .bar4 { border-left:4px solid black; } .barcode .space0 { margin-right:0 } .barcode .space1 { margin-right:1px } .barcode .space2 { margin-right:2px } .barcode .space3 { margin-right:3px } .barcode .space4 { margin-right:4px } .barcode label { clear:both; display:block; text-align:center; font: 0.125in/100% helvetica; /*size*/ } <script src=" cdnjs.cloudflare /ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>