把自己做的網(wǎng)站進(jìn)行app封包騰訊云域名注冊(cè)官網(wǎng)
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"