当前位置：首页 > news >正文

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

news 来源：原创 2025/9/19 5:04:26

编码规则与 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.htmlconsole.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="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

相关文章：