标签打印-网页打条码二维码ZPL与TSPL

打标签这件事，网页到底该画图还是发指令

仓库要打 50×30 的物料标签，产线要打 40×30 的工序卡。前端把一切都画好了，产品问：能不能别经过浏览器那一套，直接让打印机自己画？

能，但那叫发打印指令，不叫打网页。

两种做法，先分清

结论先给：能渲染就别发指令；打印量大、机器单一、要极限清晰度，才考虑 ZPL。

渲染这条路，网页怎么打标签

标签机在系统里就是一台普通打印机，纸张是自定义尺寸。前端只负责把 HTML 拼成标签的尺寸，剩下的交给本机客户端：

import webPrintPdf from 'web-print-pdf'

const html = `
  <div style="width:50mm;height:30mm;font-family:monospace;font-size:9px;padding:1mm;box-sizing:border-box">
    <div>${sku}</div>
    <div>${lot}</div>
    <img src="${barcodeSvg}" style="width:46mm;height:12mm" />
  </div>`

await webPrintPdf.printHtml(
  html,
  { width: '50mm', height: '30mm', margin: { top: '0', bottom: '0', left: '0', right: '0' } },
  { printerName: 'Zebra ZD421', paperFormat: '50 x 30 mm', scaleMode: 'noscale' },
  { action: 'print' }
)

三个参数别省：

• width/height 用 mm，和标签纸一致
• paperFormat 填驱动里的纸张名，不是随便写
• noscale——标签被缩放，条码模块宽度就变了，扫枪直接罢工

条码用矢量，别用位图

这是标签糊掉的头号原因。一张 100×100 的 PNG 放大到 46mm 宽，模块边缘全是灰，203dpi 上一打就糊。

用 SVG 或者高倍 canvas 导出。QR 也一样，容错级别别乱调，丝印标签用 M 就够。

什么时候真该上 ZPL

满足这三条再考虑：

1. 机器全是 Zebra 这类认 ZPL 的，不是杂牌混用
2. 一天几千张，渲染那几百毫秒开始碍事
3. 标签内容简单，就是字 + 条码，不需要复杂排版

ZPL 长这样：

^XA
^PW400
^LL240
^FO20,20^A0N,28,28^FDSKU-1029^FS
^FO20,60^BY2^BCN,80,Y,N,N^FD1029A^FS
^XZ

发给打印机的方式一般是：共享端口直写、或经由支持裸指令的打印中间件。注意：不是所有本机打印方案都支持透传裸指令，选型时要先问清楚，别写完才发现只能渲染。

常见坑

最后

标签是「小尺寸 + 高精度」的场景，最容易在清晰度上翻车。

先走渲染，把尺寸和 noscale 调对；真到几千张一天、机器又统一，再谈 ZPL。 顺序反了，你会在打印机手册里泡一个星期。