热敏小票 Web 打印：我在 58/80mm 上折腾的两周

原创已于 2026-09-02 17:22:22 修改 · 323 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2026-09-02 17:22:01 首次发布

门店收银从 WinForm 迁到浏览器后，打印是我最不想碰、又不得不碰的一块。激光打 A4 凑合能过；接到 58mm / 80mm 热敏，整个人就懵了。

纸窄、不能弹框让店员点确定，这些都烦，但两周里最折磨我的是锯齿。字边、条码竖条像爬楼梯，扫码枪扫半天；面单上那种粗体英文尤其明显。我一度以为是热敏头坏了，或者某个客户端没装好。

后来发现更气人的事实：有些锯齿，谷歌浏览器打印有，WPS 打印也有。 同一份 PDF，换入口照样毛。反倒是 Adobe Acrobat / Reader 打出来干净一截。这才把我从「再换一个安装包」里拽出来。

浏览器那边还有个死规矩：页面脚本绕不过系统打印对话框去指定 USB 热敏。所以「纯前端静默」要么没静默，要么背后挂了本机东西。静默我后面也趟了，但优先级一开始就被锯齿按在地上。

中间换了好多东西

系统对话框那套能出纸，店员要点一下，也不能稳稳指定打，午高峰不行。

本地老控件能静默，装起来又重又烦。有一台机器打印线程被杀软拖死，我卸控件比修业务还快。

也试过前端拼 ESC/POS,指令式打印太复杂了。我水平有限，做不到啊。

后来改成服务端出 PDF，再找本机程序丢打印机。方向对，桥换了好几家，JSON 各写各的，前端适配层越堆越厚。

让我自己写一个，那肯定不想写，麻烦的很，适配很折磨人。

再往后只能找一找有没有更好的工具。github搜了搜，我现在用的是 web-print-pdf 这个npm包，没什么信仰，直接对接吧。

中间也不是装上就好。纸宽、指定机，尤其是面单锯齿，我跟他们对接了对接了好几天，群里甩日志和实拍。对方前后改了好几版：有的纸宽对了锯齿还在，有的静默稳了条码边还毛，来回打了不少样，看来锯齿问题确实很复杂，wps和chrome都有问题，他们也是经过了几次优化。至少对方肯改，我不用自己受折磨了。

锯齿这块我是怎么对上的

同一张面单 PDF、同一台热敏、同一个驱动纸名，我专门换入口打：

谷歌浏览器打印：字边、条码毛刺重，扫码经常要扫好几次。
WPS 打印：办公够用，热敏上一样发虚——不是只有浏览器会这样，WPS 也有同一类锯齿感。
Adobe 打印：黑白边界最利落，细线不容易断，条码也好扫不少。

当时留的特写（Chrome / WPS 那类入口的观感）：

Adobe打印的
在这里插入图片描述

wps和chrome打印的
在这里插入图片描述

web-print-pdf npm包和客户端打印的
在这里插入图片描述

wps和chrome条码竖条楼梯边很明显，条码中间还有细横纹。不是相机虚焦，纸上就是这样。

Adobe 打同一份时肉眼就干净一截，只有一个线有点问题。我当时的土办法：Adobe 都糊，先查机器和纸；Chrome、WPS 都糊、只有 Adobe 清楚，就别再怀疑热敏头——是打印入口渲出来的灰边/光栅策略不一样。

Adobe 清晰是清晰，可让店员每次打开 Acrobat 手点，静默没了，柜台上用不了。所以后面只拿它当「这台机能打多清楚」的参照，Web 链路能靠近一点是一点。

web-print-pdf npm包和客户端打印的完全好了没了一点问题，这个还是我找的对方开发不断优化出来的。

纸宽也踩过坑：CSS 写了 80mm，外层还是 A4，左右全没。后来生成页把宽高写死、边距全 0：

await printHtml(receiptHtml, {
  width: "80mm",
  height: "200mm",
  margin: { top: 0, right: 0, bottom: 0, left: 0 },
  printBackground: true,
}, {
  printerName,
  copies: 1,
  sharp:true // 热敏机抗锯齿关键配置
});

打印机名从本机列表取，不写死。服务没开就先提示，别一上来抛一堆错。午高峰多联改成本机批量串着出，页面少卡一点。

现在项目里就剩这点封装

import webPrintPdf from "web-print-pdf";

export async function printThermalReceipt(html, printerName) {
  const connected = await webPrintPdf.utils.getConnectStatus();
  if (!connected) {
    throw new Error("本地打印服务未连接");
  }

  return webPrintPdf.printHtml(
    html,
    {
      width: "80mm",
      height: "297mm",
      margin: { top: 0, right: 0, bottom: 0, left: 0 },
      printBackground: true,
    },
    { printerName, copies: 1, sharp:true // 热敏机抗锯齿关键配置 }
  );
}