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

帅比九日

已于 2024-05-16 17:52:06 修改

阅读量1.2k

点赞数 18

分类专栏：踩过的坑文章标签：斑马打印机浏览器前端 javascript

于 2024-05-13 17:44:20 首次发布

本文链接：https://blog.csdn.net/qq_41883423/article/details/138809149

版权

踩过的坑专栏收录该内容

146 篇文章 3 订阅

订阅专栏

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" === typeof d) e.loadFileFromUrl(d, function (d) { m.sendFile(d, a, f) }, f); else {
          var g = b("POST", l + "write"); if (g) {
            g.responseType = "text"; h(g, a, f); var c =
              new FormData, n = {}; n.device = m; c.append("json", JSON.stringify(n)); c.append("blob", d); g.send(c)
          }
        }
      }; this.convertAndSendFile = function (d, a, b, c) { c || (c = {}); c.action || (c.action = "print"); e.convert(d, this, c, a, b) }; this.read = function (d, a) {
        var f = b("POST", l + "read"); f && (void 0 !== m && (void 0 === d && (d = m.readFinishedCallback), void 0 === a && (a = m.readErrorCallback)), c(f, d, a), f.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
          }
        })))
      }; this.readUntilStringReceived = function (d, a, b, e, c) { c || (c = ""); void 0 === e && (e = this.readRetries); a = function (a, b, e, f, g) { return function (c) { if (c && 0 !== c.length) f = 0; else if (0 >= f) { b(g); return } c = g + c; "" !== d && -1 < c.indexOf(d) ? b(c) : a.readUntilStringReceived(d, b, e, f - 1, c) } }(this, a, b, e, c); this.read(a, b) }; this.readAllAvailable = function (a, b, f) { this.readUntilStringReceived("", a, b, f) }; this.sendThenRead = function (a, b, f) { this.send(a, function (a) { return function () { a.read(b, f) } }(this), f) };
    this.sendThenReadUntilStringReceived = function (a, b, f, e, c) { this.send(a, function (a) { return function () { a.readUntilStringReceived(b, f, e, c) } }(this), e) }; this.sendThenReadAllAvailable = function (a, b, e, c) { this.send(a, function (a) { return function () { a.readUntilStringReceived("", b, e, c) } }(this), e) }
  }; e.defaultSuccessCallback = function () { }; e.defaultErrorCallback = function () { }; e.ApplicationConfiguration = function () { this.application = { version: "1.2.0.3", build_number: 3, api_level: 2, platform: "", supportedConversions: {} } }; e.getLocalDevices =
    function (a, c, d) { var g = b("GET", l + "available"); g && (finishedFunction = function (b) { response = b; response = JSON.parse(response); for (var c in response) if (response.hasOwnProperty(c) && response[c].constructor === Array) for (let arr = response[c], b = 0; b < arr.length; ++b)arr[b] = new e.Device(arr[b]); void 0 === d ? a(response) : (response.hasOwnProperty(d) || (response[d] = []), a(response[d])) }, h(g, finishedFunction, c), g.send()) }; e.getDefaultDevice = function (a, c, d) {
      var g = "default"; void 0 !== a && null != a && (g = g + "?type=" + a); if (a = b("GET", l + g)) finishedFunction =
        function (a) { response = a; "" === response ? c(null) : (response = JSON.parse(response), a = new e.Device(response), c(a)) }, a = h(a, finishedFunction, d), a.send()
    }; e.getApplicationConfiguration = function (a, c) { var d = b("GET", l + "config"); d && (finishedFunction = function (b) { response = b; "" === response ? a(null) : (response = JSON.parse(response), a(response)) }, h(d, finishedFunction, c), d.send()) }; e.readOnInterval = function (a, b, d) {
      if (void 0 === d || 0 === d) d = 1; readFunc = function () {
        a.read(function (c) { b(c); k[a] = setTimeout(readFunc, d) }, function (b) {
          k[a] =
            setTimeout(readFunc, d)
        })
      }; k[a] = setTimeout(readFunc, d)
    }; e.stopReadOnInterval = function (a) { k[a] && clearTimeout(k[a]) }; e.bindFieldToReadData = function (a, b, d, c) { e.readOnInterval(a, function (a) { "" !== a && (b.value = a, void 0 !== c && null != c && c()) }, d) }; e.loadFileFromUrl = function (a, c, d) { request = b("get", a); console.log("ResponseType: " + request.responseType); request.responseType = "blob"; h(request, c, d); request.send() }; e.convert = function (a, c, d, g, f) {
      if (a) if ("string" === typeof a) e.loadFileFromUrl(a, function (b) {
        d.fromFormat ||
          (d.fromFormat = a.substring(a.length - 3)); e.convert(b, c, d, g, f)
      }, f); else { var k = b("POST", l + "convert"); a.type && (a.type.startsWith("image/") || a.type.startsWith("application/")) && (d.fromFormat = a.type.toLowerCase().replace("image/", "").replace("application/", "").replace("x-ms-", "")); if (k) { k.responseType = "text"; h(k, function (a) { g(JSON.parse(a)) }, f); var m = new FormData, n = {}; null != d && void 0 !== d && (n.options = d); c && (n.device = c); m.append("json", JSON.stringify(n)); m.append("blob", a); k.send(m) } } else f ? f("Resource not specified") :
        e.defaultErrorCallback("Resource not specified")
    }; return e
}();

var $jscomp = $jscomp || {}; $jscomp.scope = {}; $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 (e, h, g) { e != Array.prototype && e != Object.prototype && (e[h] = g.value) }; $jscomp.getGlobal = function (e) { return "undefined" != typeof window && window === e ? e : "undefined" != typeof global && null != global ? global : e }; $jscomp.global = $jscomp.getGlobal(this); $jscomp.SYMBOL_PREFIX = "jscomp_symbol_";
$jscomp.initSymbol = function () { $jscomp.initSymbol = function () { }; $jscomp.global.Symbol || ($jscomp.global.Symbol = $jscomp.Symbol) }; $jscomp.Symbol = function () { var e = 0; return function (h) { return $jscomp.SYMBOL_PREFIX + (h || "") + e++ } }();
$jscomp.initSymbolIterator = function () { $jscomp.initSymbol(); var e = $jscomp.global.Symbol.iterator; e || (e = $jscomp.global.Symbol.iterator = $jscomp.global.Symbol("iterator")); "function" != typeof Array.prototype[e] && $jscomp.defineProperty(Array.prototype, e, { configurable: !0, writable: !0, value: function () { return $jscomp.arrayIterator(this) } }); $jscomp.initSymbolIterator = function () { } }; $jscomp.arrayIterator = function (e) { var h = 0; return $jscomp.iteratorPrototype(function () { return h < e.length ? { done: !1, value: e[h++] } : { done: !0 } }) };
$jscomp.iteratorPrototype = function (e) { $jscomp.initSymbolIterator(); e = { next: e }; e[$jscomp.global.Symbol.iterator] = function () { return this }; return e }; $jscomp.makeIterator = function (e) { $jscomp.initSymbolIterator(); var h = e[Symbol.iterator]; return h ? h.call(e) : $jscomp.arrayIterator(e) };
$jscomp.polyfill = function (e, h, g, l) { if (h) { g = $jscomp.global; e = e.split("."); for (l = 0; l < e.length - 1; l++) { var c = e[l]; c in g || (g[c] = {}); g = g[c] } e = e[e.length - 1]; l = g[e]; h = h(l); h != l && null != h && $jscomp.defineProperty(g, e, { configurable: !0, writable: !0, value: h }) } }; $jscomp.FORCE_POLYFILL_PROMISE = !1;
$jscomp.polyfill("Promise", function (e) {
  function h () { this.batch_ = null } function g (b) { return b instanceof c ? b : new c(function (a, f) { a(b) }) } if (e && !$jscomp.FORCE_POLYFILL_PROMISE) return e; h.prototype.asyncExecute = function (b) { null == this.batch_ && (this.batch_ = [], this.asyncExecuteBatch_()); this.batch_.push(b); return this }; h.prototype.asyncExecuteBatch_ = function () { var b = this; this.asyncExecuteFunction(function () { b.executeBatch_() }) }; var l = $jscomp.global.setTimeout; h.prototype.asyncExecuteFunction = function (b) {
    l(b,
      0)
  }; h.prototype.executeBatch_ = function () { for (; this.batch_ && this.batch_.length;) { var b = this.batch_; this.batch_ = []; for (var a = 0; a < b.length; ++a) { var f = b[a]; delete b[a]; try { f() } catch (k) { this.asyncThrow_(k) } } } this.batch_ = null }; h.prototype.asyncThrow_ = function (b) { this.asyncExecuteFunction(function () { throw b; }) }; var c = function (b) { this.state_ = 0; this.result_ = void 0; this.onSettledCallbacks_ = []; var a = this.createResolveAndReject_(); try { b(a.resolve, a.reject) } catch (f) { a.reject(f) } }; c.prototype.createResolveAndReject_ =
    function () { function b (b) { return function (k) { f || (f = !0, b.call(a, k)) } } var a = this, f = !1; return { resolve: b(this.resolveTo_), reject: b(this.reject_) } }; c.prototype.resolveTo_ = function (b) { if (b === this) this.reject_(new TypeError("A Promise cannot resolve to itself")); else if (b instanceof c) this.settleSameAsPromise_(b); else { a: switch (typeof b) { case "object": var a = null != b; break a; case "function": a = !0; break a; default: a = !1 }a ? this.resolveToNonPromiseObj_(b) : this.fulfill_(b) } }; c.prototype.resolveToNonPromiseObj_ = function (b) {
      var a =
        void 0; try { a = b.then } catch (f) { this.reject_(f); return } "function" == typeof a ? this.settleSameAsThenable_(a, b) : this.fulfill_(b)
    }; c.prototype.reject_ = function (b) { this.settle_(2, b) }; c.prototype.fulfill_ = function (b) { this.settle_(1, b) }; c.prototype.settle_ = function (b, a) { if (0 != this.state_) throw Error("Cannot settle(" + b + ", " + a | "): Promise already settled in state" + this.state_); this.state_ = b; this.result_ = a; this.executeOnSettledCallbacks_() }; c.prototype.executeOnSettledCallbacks_ = function () {
      if (null != this.onSettledCallbacks_) {
        for (var b =
          this.onSettledCallbacks_, a = 0; a < b.length; ++a)b[a].call(), b[a] = null; this.onSettledCallbacks_ = null
      }
    }; var d = new h; c.prototype.settleSameAsPromise_ = function (b) { var a = this.createResolveAndReject_(); b.callWhenSettled_(a.resolve, a.reject) }; c.prototype.settleSameAsThenable_ = function (b, a) { var f = this.createResolveAndReject_(); try { b.call(a, f.resolve, f.reject) } catch (k) { f.reject(k) } }; c.prototype.then = function (b, a) {
      function f (a, f) { return "function" == typeof a ? function (f) { try { k(a(f)) } catch (n) { d(n) } } : f } var k, d, e = new c(function (a,
        f) { k = a; d = f }); this.callWhenSettled_(f(b, k), f(a, d)); return e
    }; c.prototype.catch = function (b) { return this.then(void 0, b) }; c.prototype.callWhenSettled_ = function (b, a) { function f () { switch (k.state_) { case 1: b(k.result_); break; case 2: a(k.result_); break; default: throw Error("Unexpected state: " + k.state_); } } var k = this; null == this.onSettledCallbacks_ ? d.asyncExecute(f) : this.onSettledCallbacks_.push(function () { d.asyncExecute(f) }) }; c.resolve = g; c.reject = function (b) { return new c(function (a, f) { f(b) }) }; c.race = function (b) {
      return new c(function (a,
        f) { for (var k = $jscomp.makeIterator(b), d = k.next(); !d.done; d = k.next())g(d.value).callWhenSettled_(a, f) })
    }; c.all = function (b) { var a = $jscomp.makeIterator(b), f = a.next(); return f.done ? g([]) : new c(function (b, d) { function k (a) { return function (f) { c[a] = f; e--; 0 == e && b(c) } } var c = [], e = 0; do c.push(void 0), e++, g(f.value).callWhenSettled_(k(c.length - 1), d), f = a.next(); while (!f.done) }) }; return c
}, "es6", "es3"); function dbg (e) { }
var Zebra = function () {
  function e (c, d) { if (d instanceof g.Printer.Status && l[c.device.uid]) { if (d.offline) { if (c.errors++, c.errors < c.errorsForOffline) return } else c.errors = 0; var b = l[c.device.uid].status, a = JSON.stringify(b); c.status = d; statusStr = JSON.stringify(d); if (statusStr !== a) c.onchange(b, d) } } function h (c) { return 2 !== c.charCodeAt(0) || 3 !== c.charCodeAt(c.length - 1) ? (dbg("Response did not contain proper control characters"), !1) : !0 } var g = {}, l = {}; setInterval(function () {
    for (var c in l) l.hasOwnProperty(c) && (c =
      l[c], function (d) { d.device.getStatus(function (b) { e(d, b) }, function (b) { e(d, new g.Printer.Status("")) }) }(c))
  }, 2E3); g.Printer = function (c) {
    BrowserPrint.Device.call(this, c); g.Printer.Status = function (a) {
      this.raw = a; this.isFlagSet = function (a) { return "1" === this.raw.charAt(a) }; this.offline = !1; a || (a = ""); a = a.trim(); h(a) ? (this.offline = !1, this.paperOut = this.isFlagSet(5), this.paused = this.isFlagSet(7), this.headOpen = this.isFlagSet(43), this.ribbonOut = this.isFlagSet(45)) : (this.offline = !0, this.ribbonOut = this.headOpen = this.paused =
        this.paperOut = !1); this.isPrinterReady = function () { return !(this.paperOut || this.paused || this.headOpen || this.ribbonOut || this.offline) }; this.getMessage = function () { return this.isPrinterReady() ? "Ready" : this.offline ? "Offline" : this.paperOut ? "Paper Out" : this.headOpen ? "Head Open" : this.ribbonOut ? "Ribbon Out" : this.paused ? "Paused" : "Ready" }
    }; g.Printer.Info = function (a) { if (!a) throw "Invalid Response"; this.raw = a; a = a.trim(); if (!h(a)) throw "Invalid Response"; a = a.split(","); this.model = a[0].substring(1); this.firmware = a[1] };
    g.Printer.Configuration = function (a) {
      if (!a) throw "Invalid Response"; this.raw = a = a.trim(); this.settings = {}; if (!h(a)) throw "Invalid Response"; a = a.replace(String.fromCharCode(2), ""); a = a.replace(String.fromCharCode(3), ""); a = a.split("\n"); for (var f = 0; f < a.length; ++f) { var b = a[f].trim(), d = b.substring(20); b = b.substring(0, 20).trim(); this.settings[d] = b } this.darkness = parseFloat(this.settings.DARKNESS); this.printSpeed = parseInt(this.settings["PRINT SPEED"].replace("IPS", "").trim()); this.printWidth = parseInt(this.settings["PRINT WIDTH"]);
      this.labelLength = parseInt(this.settings["LABEL LENGTH"]); this.firmwareVersion = this.settings.FIRMWARE.replace("<-", "").trim(); this.linkOSVersion = this.settings.hasOwnProperty("LINK-OS VERSION") ? this.settings["LINK-OS VERSION"] : "0"
    }; var d = this; this.configuration = void 0; this.device_request_queue = []; this.clearRequestQueue = function () { var a = this.device_request_queue[0]; this.device_request_queue = []; a && a.started && (this.device_request_queue[0] = a) }; this.Request = function (a, f, b, c, e) {
      this.type = a; this.command = f;
      this.received = b; this.success = c; this.error = function (a) { return function (f) { a(f); d.executeNextRequest() } }(e); this.execute = function () { this.started = !0; "info" == this.type || "config" == this.type || "status" == this.type ? d.sendThenReadUntilStringReceived(this.command, String.fromCharCode(3), this.received, this.error) : d.sendThenReadAllAvailable(this.command, this.received, this.error) }
    }; this.executeNextRequest = function () { d.device_request_queue.shift(); d.executeRequest() }; this.executeRequest = function () {
      dbg("Requests in queue: " +
        d.device_request_queue.length); 0 < d.device_request_queue.length && (dbg("Executing next request..."), d.device_request_queue[0].execute())
    }; this.queueRequest = function (a) { dbg("Queueing request " + a.type + ": " + d.device_request_queue.length); d.device_request_queue.push(a); 1 === d.device_request_queue.length && a.execute() }; this.onStatusResponse = function (a) {
      dbg("received status response"); var f = void 0; try { f = new g.Printer.Status(a) } catch (k) { a = d.device_request_queue[0], a.error(k), d.executeNextRequest() } for (; 0 < d.device_request_queue.length;)if (a =
        d.device_request_queue[0], "status" === a.type) dbg("delivering status..."), a.success(f), d.device_request_queue.shift(); else { dbg("delivered to all status requests."); break } d.executeRequest()
    }; this.onResponse = function (a, f) { dbg("received info response"); var b = d.device_request_queue[0]; if (void 0 != f) try { a = new f(a) } catch (m) { b.error && b.error(m); d.executeNextRequest(); return } b.success && b.success(a); d.executeNextRequest() }; this.onSGDResponse = function (a) { dbg("received sgd response"); d.onResponse(a) }; this.onInfoResponse =
      function (a) { dbg("received info response"); d.onResponse(a, g.Printer.Info) }; this.onConfigurationResponse = function (a) { dbg("received config response"); try { d.configuration = new g.Printer.Configuration(a) } catch (f) { } d.onResponse(a, g.Printer.Configuration) }; this.setSGD = function (a, f, b, c) { if (!b && !c) return new Promise(function (b, c) { d.setSGD(a, f, b, c) }); d.send('! U1 setvar "' + a + '" "' + f + '"\r\n', b, c) }; this.getSGD = function (a, b, c) {
        if (!b && !c) return new Promise(function (b, f) { d.getSGD(a, b, f) }); b = new this.Request("sgd",
          '! U1 getvar "' + a + '"\r\n', this.onSGDResponse, b, c); this.queueRequest(b)
      }; this.setThenGetSGD = function (a, b, c, e) { if (!c && !e) return new Promise(function (f, c) { d.setThenGetSGD(a, b, f, c) }); this.setSGD(a, b, function () { d.getSGD(a, c, e) }, e) }; this.getInfo = function (a, b) { if (!a && !b) return new Promise(function (a, b) { d.getInfo(a, b) }); a = new this.Request("info", "~hi\r\n", this.onInfoResponse, a, b); this.queueRequest(a) }; this.getConfiguration = function (a, b) {
        if (!a && !b) return new Promise(function (a, b) { d.getConfiguration(a, b) });
        a = new this.Request("config", "^XA^HH^XZ", this.onConfigurationResponse, a, b); this.queueRequest(a)
      }; this.getStatus = function (a, b) { if (!a && !b) return new Promise(function (a, b) { d.getStatus(a, b) }); a = new this.Request("status", "~hs\r\n", this.onStatusResponse, a, b); d.queueRequest(a) }; this.query = function (a, b, c) { if (!b && !c) return new Promise(function (b, c) { d.query(a, b, c) }); b = new this.Request("", a, this.onResponse, b, c); this.queueRequest(b) }; this.isPrinterReady = function (a, b) {
        if (!a && !b) return new Promise(function (a, b) {
          d.isPrinterReady(a,
            b)
        }); this.getStatus().then(function (c) { c.isPrinterReady() ? a(c.getMessage()) : b(c.getMessage()) })
      }; this.printImageAsLabel = function (a, c, e, g) { if (!e && !g) return new Promise(function (b, f) { d.printImageAsLabel(a, c, b, f) }); b().then(function (b) { c.fitTo = { width: b.printWidth, height: b.labelLength }; c.action = "print"; BrowserPrint.convert(a, d, c, e, g) }).catch(g) }; this.getConvertedResource = function (a, c, e, g) {
        if (!e && !g) return new Promise(function (b, f) { d.getConvertedResource(a, c, b, f) }); b().then(function (b) {
          c.action = "return";
          BrowserPrint.convert(a, d, c, e, g)
        }).catch(g)
      }; this.storeConvertedResource = function (a, c, e, g) { if (!e && !g) return new Promise(function (b, e) { d.storeConvertedResource(a, c, b, e) }); b().then(function (b) { c.action = "store"; BrowserPrint.convert(a, d, c, e, g) }).catch(g) }; var b = function () { return new Promise(function (a, b) { if (d.configuration) a(d.configuration); else return d.getConfiguration().then(function (a) { d.configuration = a; return d.configuration }).catch(function (a) { b(a) }) }) }; this.configTimeout = function () {
        d.configuration ||
          d.getConfiguration().then(function (a) { return d.configuration = a }).catch(function () { setTimeout(d.configTimeout, 1E3) })
      }; this.configTimeout()
  }; g.watch = function (c, d, b) { b || (b = 2); l[c.uid] = { device: c, status: "", onchange: d, errors: 0, errorsForOffline: b } }; g.stopWatching = function (c) { delete l[c.uid] }; return g
}();

export default {
  data () {
    return {
      printers: null,
      printerLoading: false,
    };
  },
  methods: {
    initPrinters (tableData, autoPrint, callback) {
      if (BrowserPrint) {
        this.printerLoading = true;
        this.$message('正在初始化打印机,请稍等！')
        BrowserPrint.getLocalDevices(devices => {
          this.printers = devices.printer.filter(device => device.deviceType === 'printer');
          if (!this.printers || !this.printers.length) {
            this.$message.error('没有可用的打印机，请检查驱动或USB连接！')
          }
          if (autoPrint) this.printLabel(tableData, callback)
          this.printerLoading = false;
        }, error => {
          this.printerLoading = false;
          this.$message.error('无法找到打印机，请检查驱动或USB连接！')
        });
      } else {
        this.$message.error('BrowserPrint not available')
      }
    },
    printLabel (tableData, callback) {
      if (!this.printers.length) {
        console.error('没有找到打印机！');
        return;
      }
      // For simplicity, we'll use the first printer in the list.
      const printer = this.printers[0];
      let baseX = 1050;
      let baseY = 118;
      let spacingY = 512;
      let spacingX = 100;
      
      if (printer.manufacturer.includes("Zebra") || printer.name.includes("ZD420") || printer.name.toLowerCase().indexOf("zd420") != -1) {
        console.log("printer === ", printer);
        baseX = 820;
        baseY = 90;
      }
      // let tableData = [
      //   {lable: '仓库',value:'11111111111111'},
      //   {lable: '条码号',value:'CPCP-CI221112-17-60'},
      //   {lable: '状态',value:'1'},
      //   {lable: '关联单号',value:'1'},
      //   {lable: '车牌号',value:'1'},
      //   {lable: '毛重',value:''},
      //   {lable: '物料代码',value:''},
      //   {lable: '过磅时间',value:''},
      //   {lable: '皮重',value:''},
      //   {lable: '规格编号',value:''},
      //   {lable: '入库时间',value:''},
      //   {lable: '净重',value:''},
      //   {lable: '供货单位',value:''},
      //   {lable: '包装规格',value:''},
      //   {lable: '扣杂',value:''},
      //   {lable: '磅单编号',value:''},
      //   {lable: '物料库位',value:''},
      //   {lable: '实际净重',value:''},
      //   {lable: '司磅员',value:''},
      //   {lable: '物料描述',value:''},
      //   {lable: '批次总号',value:''},
      // ]
      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'
      printer.send(zpl, _ => {
        this.$message.success('开始打印！')
        callback && callback()
      }, error => {
        this.$message.error('打印失败,请确认打印机状态！')
      });
    },
  }
}

结论

通过使用JavaScript和BrowserPrint API，开发者可以轻松地将斑马打印机集成到Web应用中，实现从浏览器直接控制打印任务。这种方法简化了传统打印解决方案的复杂性，使得在任何支持JavaScript的平台上都可以实现高效、灵活的打印操作。

帅比九日

关注

18
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
【斑马打印机】web前端页面通过BrowserPrint API连接斑马打印机进行RFID条形码贴纸打印

在现代物流、仓储和零售行业中，RFID和二维码技术发挥着至关重要的作用。这些技术不仅提高了效率，还增强了追踪和管理的能力。本文将介绍如何使用JavaScript和斑马打印机的BrowserPrint API来打印RFID二维码贴纸。BrowserPrint是斑马技术公司提供的一个JavaScript库，它允许网页应用直接与连接到客户端计算机上的斑马打印机进行交互。这意味着开发者可以在不需要安装额外软件的情况下，直接从网页应用中发送打印任务到斑马打印机。
复制链接

扫一扫