网站优化 流量,怎么做自己网站的后台,山东建筑公司排名,手机房屋平面设计软件编码规则与 JavaScript 代码实现 编码规则数组#xff1a;定义了 Code 128 条形码编码规则数组 BARS#xff0c;其中每个数字对应一种条形码的线条组合模式。
const BARS [212222,222122,222221,121223,121322,131222,122213,122312,132212,221213,221312,231212,112232,12…编码规则与 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 classbar${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 classleft marginleftdiv classbarcode2 idbarCodeDiv/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
htmlheadmeta charsetUTF-8meta http-equivContent-Type contenttext/html; charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleCode 128 Barcode/titlestyle typetext/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
/headbodydiv classleft marginleftdiv classbarcode2 idbarCodeDiv/div/divinput idbarCodeValue typehidden valueSCMRMEGA1904128156script(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 classbar${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/htmlvue打印代码 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 idbarCodeValue value110000918 typehidden 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, // 设置二维码的高度可根据需要调整});}
/scriptdiv classbarcodestyleheight:150px;width: 150px idbarCodeDiv/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 srchttps://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js/script
