web前端頁(yè)面通過(guò)BrowserPrint API連接斑馬打印機(jī)進(jìn)行RFID條形碼貼紙打印

在現(xiàn)代物流、倉(cāng)儲(chǔ)和零售行業(yè)中，RFID和二維碼技術(shù)發(fā)揮著至關(guān)重要的作用。這些技術(shù)不僅提高了效率，還增強(qiáng)了追蹤和管理的能力。本文將介紹如何使用JavaScript和斑馬打印機(jī)的BrowserPrint API來(lái)打印RFID二維碼貼紙。

1. BrowserPrint API 簡(jiǎn)介

BrowserPrint是斑馬技術(shù)公司提供的一個(gè)JavaScript庫(kù)，它允許網(wǎng)頁(yè)應(yīng)用直接與連接到客戶(hù)端計(jì)算機(jī)上的斑馬打印機(jī)進(jìn)行交互。這意味著開(kāi)發(fā)者可以在不需要安裝額外軟件的情況下，直接從網(wǎng)頁(yè)應(yīng)用中發(fā)送打印任務(wù)到斑馬打印機(jī)。

2. 環(huán)境設(shè)置

要使用BrowserPrint API，首先需要確保斑馬打印機(jī)正確連接到計(jì)算機(jī)，并且用戶(hù)的系統(tǒng)上已安裝BrowserPrint應(yīng)用程序。此應(yīng)用程序作為一個(gè)服務(wù)運(yùn)行，允許通過(guò)本地網(wǎng)絡(luò)接口與打印機(jī)通信。

本例使用的是zebra-browser-print-windows-v131445.exe作為驅(qū)動(dòng)。
安裝后運(yùn)行程序，驅(qū)動(dòng)會(huì)通過(guò)串口查詢(xún)到已經(jīng)連接的斑馬打印機(jī)，并啟動(dòng)一個(gè)本地服務(wù)與之通信。

3. 打印機(jī)初始化

在JavaScript代碼中，首先需要初始化BrowserPrint API，并搜索可用的打印設(shè)備。以下是初始化打印機(jī)并檢索連接的打印機(jī)列表的代碼段：

BrowserPrint.getLocalDevices(devices => {this.printers = devices.printer.filter(device => device.deviceType === 'printer');if (!this.printers || !this.printers.length) {this.$message.error('沒(méi)有可用的打印機(jī)，請(qǐng)檢查驅(qū)動(dòng)或USB連接！');}
}, error => {this.$message.error('無(wú)法找到打印機(jī)，請(qǐng)檢查驅(qū)動(dòng)或USB連接！');
});

4. 構(gòu)建ZPL指令

ZPL（Zebra Programming Language）是斑馬打印機(jī)使用的命令語(yǔ)言，用于定義打印標(biāo)簽的布局和內(nèi)容。在我們的示例中，我們構(gòu)建了一個(gè)ZPL字符串，用于設(shè)置標(biāo)簽的大小、位置和內(nèi)容，包括二維碼和RFID數(shù)據(jù)。

let index = 1;let zpl = '^XA'let x = baseX;let y = baseY;for (let item of tableData) {if (item.h) {zpl += ' ^CI28 ^FO' + (x - spacingX * 2) + ',' + y + '^A@R,32,32,E:SIMSUN.TTF ^FB160,8,,J, ^FD' + (item.lable || '') + '：' + '^FS ';zpl += ' ^CI28 ^FO' + (x - spacingX * 2) + ',' + (y + 160) + '^A@R,32,32,E:SIMSUN.TTF ^FB330,8,,J, ^FD' + (item.value || '') + '^FS ';} else {zpl += ' ^CI28 ^FO' + x + ',' + y + '^A@R,32,32,E:SIMSUN.TTF ^FB160,2,,J, ^FD' + (item.lable || '') + '：' + '^FS ';zpl += ' ^CI28 ^FO' + x + ',' + (y + 160) + '^A@R,32,32,E:SIMSUN.TTF ^FB330,2,,J, ^FD' + (item.value || '') + '^FS ';}if (index === 3) {x -= spacingX;y = baseY;index = 1;} else {index++;y += spacingY;}}zpl += ' ^FO' + baseY + ',' + (baseY + (spacingY * 0.9)) + '^BY3 ^BCR,100,Y,N,N ^FD' + (tableData.find(item => item.lable === '條碼號(hào)').value || '') + '^FS 'let bdbh = tableData.find(item => item.lable === '磅單編號(hào)').value || '';if (bdbh.length > 12) {this.$message.error('磅單編號(hào)長(zhǎng)度大于12，寫(xiě)入RFID將不正確！')}function stringToHexAscii (input) {let hexAscii = '';for (let i = 0; i < input.length; i++) {const charCode = input.charCodeAt(i);const hexValue = charCode.toString(16).padStart(2, '0');hexAscii += hexValue.toUpperCase();}return hexAscii;}bdbh = stringToHexAscii(bdbh)zpl += '^RFW,H^FD' + bdbh + 'FFFFFFFFFFFFFFFFFFFFFFFF' + '^FS'zpl += '^XZ'

構(gòu)建ZPL指令詳解

ZPL（Zebra Programming Language）是斑馬打印機(jī)專(zhuān)用的一種命令語(yǔ)言，用于控制標(biāo)簽的打印格式和內(nèi)容。在構(gòu)建ZPL指令時(shí)，每個(gè)指令都有特定的功能，用于定義打印內(nèi)容的布局、樣式和特性。下面將詳細(xì)介紹示例中使用的主要ZPL指令及其意義：

1. ^XA 和 ^XZ

• ^XA：這是每個(gè)ZPL腳本的開(kāi)始指令，表示開(kāi)始一條新的標(biāo)簽格式指令。
• ^XZ：這是結(jié)束指令，表示標(biāo)簽格式指令結(jié)束。在這之后的指令將不會(huì)被執(zhí)行，直到遇到下一個(gè)^XA。

2. ^FO（Field Origin）

• ^FOx,y：設(shè)置接下來(lái)的打印字段的起始位置，其中[x](file:///d%3A/ch/template-builder/print.js#51%2C231-51%2C231)和[y](file:///d%3A/ch/template-builder/print.js#197%2C11-197%2C11)是橫縱坐標(biāo)。這個(gè)指令用于定位條碼、文本或圖像在標(biāo)簽上的具體位置。

3. ^A（Font Specification）

• ^A@R,32,32,E:SIMSUN.TTF：這個(gè)指令用于設(shè)置字體。[@R](file:///d%3A/ch/template-builder/print.js#200%2C67-200%2C67)表示字體旋轉(zhuǎn)角度，[32,32](file:///d%3A/ch/template-builder/print.js#200%2C70-200%2C70)分別是字體的寬度和高度，E:SIMSUN.TTF指定使用的字體文件。

4. ^FB（Field Block）

• ^FB160,2,,J,：這個(gè)指令用于定義一個(gè)文本字段的屬性。[160](file:///d%3A/ch/template-builder/print.js#201%2C65-201%2C65)是字段寬度，[2](file:///d%3A/ch/template-builder/print.js#14%2C136-14%2C136)是最大行數(shù)，[J](file:///d%3A/ch/template-builder/print.js#200%2C99-200%2C99)表示文本的對(duì)齊方式（此處為居中對(duì)齊）。

5. ^FD（Field Data）

• ^FDtext^FS：這個(gè)指令用于定義字段的內(nèi)容。[text](file:///d%3A/ch/template-builder/print.js#23%2C31-23%2C31)是要打印的文本。^FS（Field Separator）標(biāo)記字段數(shù)據(jù)的結(jié)束。

6. ^BY（Bar Code Field Default）

• ^BY3：這個(gè)指令用于設(shè)置條碼的默認(rèn)寬度因子，[3](file:///d%3A/ch/template-builder/print.js#36%2C172-36%2C172)表示條碼寬度為標(biāo)準(zhǔn)寬度的三倍。

7. ^BC（Code 128 Bar Code）

• ^BCR,100,Y,N,N：這個(gè)指令用于打印Code 128條碼。[R](file:///d%3A/ch/template-builder/print.js#200%2C68-200%2C68)表示條碼旋轉(zhuǎn)角度，[100](file:///d%3A/ch/template-builder/print.js#164%2C22-164%2C22)是條碼的高度，后面的[Y](file:///d%3A/ch/template-builder/print.js#215%2C81-215%2C81)和[N](file:///d%3A/ch/template-builder/print.js#215%2C83-215%2C83)分別表示是否打印解釋行（條碼下的數(shù)字或字母）和是否在條碼下方打印解釋行。

8. ^RFW,H^FD（RFID Encoding）

• ^RFW,H^FDdata^FS：這個(gè)指令用于向RFID標(biāo)簽寫(xiě)入數(shù)據(jù)。[H](file:///d%3A/ch/template-builder/print.js#230%2C20-230%2C20)指定數(shù)據(jù)的寫(xiě)入模式（此處為十六進(jìn)制），[data](file:///d%3A/ch/template-builder/print.js#18%2C11-18%2C11)是要寫(xiě)入的數(shù)據(jù)。

通過(guò)這些指令的組合，可以精確地控制斑馬打印機(jī)打印出的標(biāo)簽的每一個(gè)細(xì)節(jié)，從簡(jiǎn)單的文本到復(fù)雜的條碼和RFID數(shù)據(jù)，都可以通過(guò)ZPL指令靈活配置。

5. 發(fā)送打印任務(wù)

構(gòu)建完ZPL指令后，可以使用BrowserPrint API將其發(fā)送到打印機(jī)進(jìn)行打?。?/p>

printer.send(zpl, _ => {this.$message.success('開(kāi)始打?。?);callback && callback();
}, error => {this.$message.error('打印失敗,請(qǐng)確認(rèn)打印機(jī)狀態(tài)！');
});

6. 錯(cuò)誤處理和用戶(hù)反饋

在整個(gè)過(guò)程中，代碼通過(guò)Vue.js的$message方法提供了用戶(hù)反饋，包括成功消息和錯(cuò)誤消息。這確保了用戶(hù)能夠了解打印過(guò)程中發(fā)生的任何問(wèn)題，并采取相應(yīng)的措施。

7.完整代碼

以下代碼可以作為一個(gè)vue項(xiàng)目的混入直接使用，你可以根據(jù)自己的實(shí)際情況對(duì)參數(shù)進(jìn)行調(diào)整

let finishedFunction = null;
let response = null;
var $jscomp = $jscomp || {}; $jscomp.scope = {}; $jscomp.checkStringArgs = function (b, h, c) { if (null == b) throw new TypeError("The 'this' value for String.prototype." + c + " must not be null or undefined"); if (h instanceof RegExp) throw new TypeError("First argument to String.prototype." + c + " must not be a regular expression"); return b + "" }; $jscomp.ASSUME_ES5 = !1; $jscomp.ASSUME_NO_NATIVE_MAP = !1; $jscomp.ASSUME_NO_NATIVE_SET = !1;
$jscomp.defineProperty = $jscomp.ASSUME_ES5 || "function" == typeof Object.defineProperties ? Object.defineProperty : function (b, h, c) { b != Array.prototype && b != Object.prototype && (b[h] = c.value) }; $jscomp.getGlobal = function (b) { return "undefined" != typeof window && window === b ? b : "undefined" != typeof global && null != global ? global : b }; $jscomp.global = $jscomp.getGlobal(this);
$jscomp.polyfill = function (b, h, c, e) { if (h) { c = $jscomp.global; b = b.split("."); for (e = 0; e < b.length - 1; e++) { var k = b[e]; k in c || (c[k] = {}); c = c[k] } b = b[b.length - 1]; e = c[b]; h = h(e); h != e && null != h && $jscomp.defineProperty(c, b, { configurable: !0, writable: !0, value: h }) } };
$jscomp.polyfill("String.prototype.startsWith", function (b) { return b ? b : function (b, c) { var e = $jscomp.checkStringArgs(this, b, "startsWith"); b += ""; var h = e.length, p = b.length; c = Math.max(0, Math.min(c | 0, e.length)); for (var l = 0; l < p && c < h;)if (e[c++] != b[l++]) return !1; return l >= p } }, "es6", "es3");
var BrowserPrint = function () {function b (a, b) { var d = new XMLHttpRequest; "withCredentials" in d ? d.open(a, b, !0) : "undefined" != typeof XDomainRequest ? (d = new XDomainRequest, d.open(a, b)) : d = null; return d } function h (a, b, d) { void 0 === b && (b = e.defaultSuccessCallback); void 0 === d && (d = e.defaultErrorCallback); return c(a, b, d) } function c (a, b, d) {a.onreadystatechange = function () {a.readyState === XMLHttpRequest.DONE && 200 === a.status ? "" === a.responseType ? b(a.responseText) : b(a.response) : a.readyState === XMLHttpRequest.DONE && (d ? d(a.response) :console.log("error occurred with no errorCallback set."))}; return a} var e = {}, k = {}, p = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); navigator.userAgent.indexOf("Trident/7.0"); var l = "http://127.0.0.1:9100/"; p && "https:" === location.protocol && (l = "https://127.0.0.1:9101/"); e.Device = function (a) {var m = this; this.name = a.name; this.deviceType = a.deviceType; this.connection = a.connection; this.uid = a.uid; this.version = 2; this.provider = a.provider; this.manufacturer = a.manufacturer; this.readRetries = "bluetooth" ===this.connection ? 1 : 0; this.sendErrorCallback = function (d) { }; this.sendFinishedCallback = function (d) { }; this.readErrorCallback = function (d) { }; this.readFinishedCallback = function (d) { }; this.send = function (d, a, f) {var g = b("POST", l + "write"); g && (void 0 !== m && (void 0 === a && (a = m.sendFinishedCallback), void 0 === f && (f = m.sendErrorCallback)), c(g, a, f), g.send(JSON.stringify({device: { name: this.name, uid: this.uid, connection: this.connection, deviceType: this.deviceType, version: this.version, provider: this.provider, manufacturer: this.manufacturer },data: d})))}; this.sendUrl = function (d, a, f, e) { var g = b("POST", l + "write"); g && (c(m, g, a, f), d = { device: { name: this.name, uid: this.uid, connection: this.connection, deviceType: this.deviceType, version: this.version, provider: this.provider, manufacturer: this.manufacturer }, url: d }, null != e && void 0 != e && (d.options = e), g.send(JSON.stringify(d))) }; this.sendFile = function (d, a, f) {if ("string"