【斑马打印机】web前端页面通过BrowserPrint API连接斑马打印机进行RFID条形码贴纸打印

web前端页面通过BrowserPrint API连接斑马打印机进行RFID条形码贴纸打印

在现代物流、仓储和零售行业中，RFID和二维码技术发挥着至关重要的作用。这些技术不仅提高了效率，还增强了追踪和管理的能力。本文将介绍如何使用JavaScript和斑马打印机的BrowserPrint API来打印RFID二维码贴纸。

1. BrowserPrint API 简介

BrowserPrint是斑马技术公司提供的一个JavaScript库，它允许网页应用直接与连接到客户端计算机上的斑马打印机进行交互。这意味着开发者可以在不需要安装额外软件的情况下，直接从网页应用中发送打印任务到斑马打印机。

2. 环境设置

要使用BrowserPrint API，首先需要确保斑马打印机正确连接到计算机，并且用户的系统上已安装BrowserPrint应用程序。此应用程序作为一个服务运行，允许通过本地网络接口与打印机通信。

本例使用的是zebra-browser-print-windows-v131445.exe作为驱动。
安装后运行程序，驱动会通过串口查询到已经连接的斑马打印机，并启动一个本地服务与之通信。

3. 打印机初始化

在JavaScript代码中，首先需要初始化BrowserPrint API，并搜索可用的打印设备。以下是初始化打印机并检索连接的打印机列表的代码段：

BrowserPrint.getLocalDevices(devices => {this.printers = devices.printer.filter(device => device.deviceType === 'printer');if (!this.printers || !this.printers.length) {this.$message.error('没有可用的打印机，请检查驱动或USB连接！');}
}, error => {this.$message.error('无法找到打印机，请检查驱动或USB连接！');
});

4. 构建ZPL指令

ZPL（Zebra Programming Language）是斑马打印机使用的命令语言，用于定义打印标签的布局和内容。在我们的示例中，我们构建了一个ZPL字符串，用于设置标签的大小、位置和内容，包括二维码和RFID数据。

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 === '条码号').value || '') + '^FS 'let bdbh = tableData.find(item => item.lable === '磅单编号').value || '';if (bdbh.length > 12) {this.$message.error('磅单编号长度大于12，写入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'

构建ZPL指令详解

ZPL（Zebra Programming Language）是斑马打印机专用的一种命令语言，用于控制标签的打印格式和内容。在构建ZPL指令时，每个指令都有特定的功能，用于定义打印内容的布局、样式和特性。下面将详细介绍示例中使用的主要ZPL指令及其意义：

1. ^XA 和 ^XZ

• ^XA：这是每个ZPL脚本的开始指令，表示开始一条新的标签格式指令。
• ^XZ：这是结束指令，表示标签格式指令结束。在这之后的指令将不会被执行，直到遇到下一个^XA。

2. ^FO（Field Origin）

• ^FOx,y：设置接下来的打印字段的起始位置，其中[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)是横纵坐标。这个指令用于定位条码、文本或图像在标签上的具体位置。

3. ^A（Font Specification）

• ^A@R,32,32,E:SIMSUN.TTF：这个指令用于设置字体。[@R](file:///d%3A/ch/template-builder/print.js#200%2C67-200%2C67)表示字体旋转角度，[32,32](file:///d%3A/ch/template-builder/print.js#200%2C70-200%2C70)分别是字体的宽度和高度，E:SIMSUN.TTF指定使用的字体文件。

4. ^FB（Field Block）

• ^FB160,2,,J,：这个指令用于定义一个文本字段的属性。[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)是最大行数，[J](file:///d%3A/ch/template-builder/print.js#200%2C99-200%2C99)表示文本的对齐方式（此处为居中对齐）。

5. ^FD（Field Data）

• ^FDtext^FS：这个指令用于定义字段的内容。[text](file:///d%3A/ch/template-builder/print.js#23%2C31-23%2C31)是要打印的文本。^FS（Field Separator）标记字段数据的结束。

6. ^BY（Bar Code Field Default）

• ^BY3：这个指令用于设置条码的默认宽度因子，[3](file:///d%3A/ch/template-builder/print.js#36%2C172-36%2C172)表示条码宽度为标准宽度的三倍。

7. ^BC（Code 128 Bar Code）

• ^BCR,100,Y,N,N：这个指令用于打印Code 128条码。[R](file:///d%3A/ch/template-builder/print.js#200%2C68-200%2C68)表示条码旋转角度，[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)分别表示是否打印解释行（条码下的数字或字母）和是否在条码下方打印解释行。

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

• ^RFW,H^FDdata^FS：这个指令用于向RFID标签写入数据。[H](file:///d%3A/ch/template-builder/print.js#230%2C20-230%2C20)指定数据的写入模式（此处为十六进制），[data](file:///d%3A/ch/template-builder/print.js#18%2C11-18%2C11)是要写入的数据。

通过这些指令的组合，可以精确地控制斑马打印机打印出的标签的每一个细节，从简单的文本到复杂的条码和RFID数据，都可以通过ZPL指令灵活配置。

5. 发送打印任务

构建完ZPL指令后，可以使用BrowserPrint API将其发送到打印机进行打印：

printer.send(zpl, _ => {this.$message.success('开始打印！');callback && callback();
}, error => {this.$message.error('打印失败,请确认打印机状态！');
});

6. 错误处理和用户反馈

在整个过程中，代码通过Vue.js的$message方法提供了用户反馈，包括成功消息和错误消息。这确保了用户能够了解打印过程中发生的任何问题，并采取相应的措施。

7.完整代码

以下代码可以作为一个vue项目的混入直接使用，你可以根据自己的实际情况对参数进行调整

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"