考試網(wǎng)站模版河北網(wǎng)站建設(shè)制作
- 編碼規(guī)則與 JavaScript 代碼實(shí)現(xiàn)
編碼規(guī)則數(shù)組：定義了 Code 128 條形碼編碼規(guī)則數(shù)組 BARS，其中每個數(shù)字對應(yīng)一種條形碼的線條組合模式。
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];
起始碼與結(jié)束碼常量：定義了起始碼的基礎(chǔ)值 START_BASE 和結(jié)束碼值 STOP。
const START_BASE = 38;
const STOP = 106;
生成條形碼 HTML 代碼的函數(shù)：code128 函數(shù)根據(jù)輸入的條形碼內(nèi)容和類型生成對應(yīng)的 HTML 代碼。如果未指定條形碼類型，會自動檢測。對于類型為 C 且長度為奇數(shù)的條形碼內(nèi)容，會在前面補(bǔ) 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(''));
}
將條形碼編碼轉(zhuǎn)換為 HTML 元素的函數(shù)：bar2html 函數(shù)將條形碼編碼數(shù)組轉(zhuǎn)換為 HTML 元素字符串，每個編碼對應(yīng)一個包含線條和間隔樣式的
元素。
javascript
function bar2html(s) {
const elements = [];
for (let pos = 0; pos < s.length; pos += 2) {
elements.push(
}
return elements.join(‘’);
}
檢測條形碼類型的函數(shù)：code128Detect 函數(shù)根據(jù)輸入的條形碼內(nèi)容檢測其類型，純數(shù)字為 C 型，包含小寫字母為 B 型，其他為 A 型。
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(‘’);
}
檢測條形碼類型的函數(shù)：code128Detect 函數(shù)根據(jù)輸入的條形碼內(nèi)容檢測其類型，純數(shù)字為 C 型，包含小寫字母為 B 型，其他為 A 型。
function code128Detect(code) {if (/^[0-9]+$/.test(code)) return 'C';if (/[a-z]/.test(code)) return 'B';return 'A';
}
解析條形碼字符串的函數(shù)：parseBarcode 函數(shù)解析條形碼字符串，根據(jù)條形碼類型進(jìn)行字符編碼轉(zhuǎn)換，并計算校驗(yàn)碼。最后添加起始碼、校驗(yàn)碼和結(jié)束碼到條形碼編碼數(shù)組。
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]);}// 添加校驗(yàn)碼和結(jié)束碼bars.push(BARS[check % 103], BARS[STOP]);return bars;
}
字符編碼轉(zhuǎn)換函數(shù)對象：fromType 對象包含了不同條形碼類型的字符編碼轉(zhuǎn)換函數(shù)。
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 函數(shù)掛載到 window 對象：使 code128 函數(shù)在全局可用。
window.code128 = code128;
- HTML 與 CSS 樣式
HTML 結(jié)構(gòu)：在 HTML 頁面中，使用一個 div 元素（id=“barCodeDiv”）來顯示生成的條形碼。
html
<div class="left marginleft"><div class="barcode2" id="barCodeDiv"></div>
</div>
同時，通過一個隱藏的 input 元素（id=“barCodeValue”）獲取要生成條形碼的內(nèi)容。
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 函數(shù)生成條形碼 HTML 代碼，插入到指定的 div 元素中。
const divElement = document.getElementById("barCodeDiv");
const v = document.getElementById("barCodeValue").value;
if (v) {divElement.innerHTML = code128(v, "B");
}
通過以上步驟，在 HTML 頁面中實(shí)現(xiàn)了 Code 128 一維碼的生成與顯示。
html 刪除其他無關(guān)代碼，只保留一維碼部分
<!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 條形碼編碼規(guī)則數(shù)組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(''));}// 將條形碼編碼轉(zhuǎn)換為 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]);}// 添加校驗(yàn)碼和結(jié)束碼bars.push(BARS[check % 103], BARS[STOP]);return bars;}// 字符編碼轉(zhuǎn)換函數(shù)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 函數(shù)掛載到 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()// 如果直接關(guān)窗口，彈警告if (newOpen.closed) {// 請勿直接關(guān)閉打印窗口alert(this.$t('MSG040005'))return}// 打印或取消，自動關(guān)閉新窗口newOpen.close()}, 100)
document.body.innerHTML = this.htmlconsole.log(this.html)window.print()setTimeout(() => {window.location.reload()}, 100)
區(qū)別總結(jié)
窗口操作：第一段代碼打開一個新的窗口進(jìn)行打印，不會影響當(dāng)前頁面；第二段代碼直接在當(dāng)前頁面進(jìn)行打印，并在打印完成后重新加載頁面。
頁面內(nèi)容處理：第一段代碼將內(nèi)容寫入新窗口，不改變當(dāng)前頁面的內(nèi)容；第二段代碼直接替換當(dāng)前頁面的 body 內(nèi)容。
用戶體驗(yàn)：第一段代碼提供了一個獨(dú)立的打印窗口，用戶可以在不影響當(dāng)前頁面的情況下進(jìn)行打印操作；第二段代碼會臨時改變當(dāng)前頁面的內(nèi)容，可能會給用戶帶來一些干擾。
綜上所述，選擇使用哪段代碼取決于具體的需求和場景。如果需要獨(dú)立的打印環(huán)境，避免影響當(dāng)前頁面，建議使用第一段代碼；如果需要臨時修改當(dāng)前頁面內(nèi)容進(jìn)行打印，并且希望打印完成后恢復(fù)頁面狀態(tài)，可以使用第二段代碼。
如下是二維碼的生成代碼
<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, // 設(shè)置二維碼的寬度，可根據(jù)需要調(diào)整height: 130, // 設(shè)置二維碼的高度，可根據(jù)需要調(diào)整});}
</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>