Print.js 与 web-print-pdf 对比

Print.js（npm 包名 print-js）是前端里很常见的「把某段 HTML / PDF / 图片交给浏览器打印 」工具。 web-print-pdf 则是「通过本地客户端静默出纸」方案。

两者名字里都有 print，但解决的问题层级不同 。本文帮助你在 Print.js 够用 与 必须上 web-print-pdf 之间做判断。Web打印专家客户端内也依赖类似「浏览器渲染」思路做 PDF，但最终出纸仍走本地打印栈，而非纯浏览器对话框。

资源	链接
Web打印专家官网	http://webprintpdf.com/
客户端下载	http://webprintpdf.com/downloadApp/
web-print-pdf npm	https://www.npmjs.com/package/web-print-pdf
Print.js 官网	https://printjs.crabbly.com/
GitHub（web-print-pdf）	https://github.com/weixiaoyi/web-print-pdf

1. 核心差异（30 秒版）

	Print.js	web-print-pdf
本质	封装 `window.print()` / iframe 打印	WebSocket 调本地 Web打印专家
打印对话框	✅ 会弹出	✅ 可静默（`action: 'print'`）
指定打印机	❌	✅ `printerName`
终端安装	❌ 无	✅ 需 Web打印专家
npm 体积	小	小（逻辑在客户端）
典型场景	后台导出、用户自助打一份	柜面、批量、无人值守

结论前置 ：Print.js 适合 「用户自己确认打印」 ；web-print-pdf 适合 「系统必须把纸打出来」。

2. Print.js 工作原理

Print.js 常见用法（与本项目 vueApp 中工具函数类似）：

javascript 复制代码

import printJS from "print-js";

printJS({
  printable: document.getElementById("report"),
  type: "html",
  scanStyles: false,
  style: `
    @page { margin: 5mm; }
    @media print {
      table { border-collapse: collapse; width: 100%; }
      th, td { border: 1px solid #ccc; padding: 4px 8px; }
    }
  `,
});

流程：

创建隐藏 iframe（或新窗口）
写入 HTML / 加载 PDF / 图片
调用 window.print()
浏览器弹出系统打印对话框
用户选打印机、份数、确认

支持类型：html、pdf、image、json（表格）等------轻量、接入快。

3. web-print-pdf 工作原理

javascript 复制代码

import webPrintPdf from "web-print-pdf";

await webPrintPdf.printHtml(
  document.getElementById("report").innerHTML,
  {
    paperFormat: "A4",
    printBackground: true,
    margin: { top: "10px", bottom: "10px", left: "10px", right: "10px" },
  },
  {
    printerName: "HP-LaserJet", // 可选，建议 getPrinterList()
    paperFormat: "A4",
    copies: 1,
  },
  { action: "print" }
);

流程：

HTML 发到本机 Web打印专家
Headless 引擎生成 PDF
Windows：SumatraPDF ；Linux/macOS：CUPS lp
无浏览器打印框（静默）
客户端记录日志，可排查失败原因

4. 能力对照表

能力	Print.js	web-print-pdf
打印 HTML 片段	✅	✅
打印 PDF URL	✅ `type: 'pdf'`	✅ `printPdfByUrl`
打印图片	✅	✅ `printImageByUrl`
自定义 `@page` / CSS	✅ `style` 参数	✅ `pdfOptions` + CSS
静默打印	❌	✅
指定打印机	❌	✅
双面 / 纸盒 / 份数	❌（用户在对话框选）	✅ `printOptions`
批量连打	⚠️ 循环调 printJS，多次弹窗	✅ `batchPrint`
预览与出纸一致	⚠️ 浏览器预览 ≠ 打印引擎	✅ 同一条 PDF 链路
统信 / 麒麟 / macOS 静默	❌	✅
内网 URL + Cookie	❌	✅ `extraOptions`
依赖安装	无	Web打印专家

5. Print.js 更适合的场景

管理后台 ：用户导出/打印报表，可以接受弹窗选打印机。
轻量 MVP：不想部署任何客户端。
打印频率低：偶尔打一页，体验要求不高。
已有 @media print 样式，只需触发浏览器打印。
移动端 / iPad ：只能 AirPrint 手动打（Print.js 与 window.print 同类限制）。

本仓库 vueApp/src/utils/fn.js 中 printPdf 即基于 print-js 的 HTML 打印封装------适合开发调试或非静默场景。

6. web-print-pdf 更适合的场景

柜面、窗口、自助机：不能让用户每次选打印机。
连打凭证 / 面单 ：batchPrint，见 AIdocs 05 篇。
必须指定 某台激光 / 针打（仍建议 PoC）。
Windows + 国产桌面 + Mac 同一套前端。
需要先 preview 看 PDF，再 print 出纸。
打印失败要查日志（WebSocket、队列、printerName）。

7. 从 Print.js 迁移时要注意什么

Print.js 习惯	web-print-pdf 对应
`printable: dom节点`	`printHtml(element.innerHTML)`
`type: 'pdf', printable: url`	`printPdfByUrl(url, ...)`
`style: '...'`	写进 HTML `<style>` 或页面 CSS
`scanStyles: false`	`printBackground: true` 等 `pdfOptions`
用户选打印机	`getPrinterList()` + `printerName`
无客户端	部署 Web打印专家

迁移最小步骤：

安装客户端：http://webprintpdf.com/downloadApp/
npm install web-print-pdf
把 printJS({ type:'html', ... }) 换成 printHtml
用 action: 'preview' 对比版式后再改 print

8. 能否同时保留两者？

可以，按入口区分：

javascript 复制代码

import printJS from "print-js";
import webPrintPdf from "web-print-pdf";

/** 用户自助：弹窗打印 */
export function userPrintHtml(el) {
  printJS({ printable: el, type: "html", scanStyles: false });
}

/** 柜面静默：指定打印机 */
export async function counterSilentPrint(html, printOptions) {
  return webPrintPdf.printHtml(
    html,
    { paperFormat: "A4", printBackground: true },
    printOptions,
    { action: "print" }
  );
}

管理端 / 移动端 → Print.js
柜面工作站 → web-print-pdf

9. 与 window.print 的关系

Print.js 不是 Lodop 类本地服务，它本质仍是浏览器打印入口的糖：

复制代码

Print.js  ≈  更好的 window.print（HTML/PDF/图片）
web-print-pdf  =  本地客户端 + 静默 + 指定机

若需求从「偶尔打一下」升级为「必须静默」，换 Print.js 参数解决不了，需要换架构到 web-print-pdf。

10. 选型决策树

复制代码

需要静默 / 指定打印机 / 批量？
├─ 否 → Print.js 或 window.print（简单够用）
└─ 是
    ├─ 能装本地客户端？
    │   ├─ 是 → web-print-pdf + Web打印专家
    │   └─ 否 → 无法满足真静默（见 iOS / 纯浏览器限制，04 篇）
    └─ 还要跨国产 OS / Mac？
        └─ web-print-pdf

11. 小结

Print.js ：轻、快、无客户端，适合用户手动确认的 HTML/PDF/图片打印。
web-print-pdf ：适合生产级静默打印 ，需 Web打印专家 ，与 Print.js 互补而非简单替代。
很多项目 后台用 Print.js，柜面用 web-print-pdf 是务实组合。

联调 web-print-pdf：https://www.npmjs.com/package/web-print-pdf

下载客户端：http://webprintpdf.com/downloadApp/

Print.js 为第三方开源库，请以官方文档为准。