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-pdfnpm | 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中工具函数类似）：
importprintJSfrom"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 工作原理
importwebPrintPdffrom"web-print-pdf";awaitwebPrintPdf.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. 能否同时保留两者？
可以，按入口区分：
importprintJSfrom"print-js";importwebPrintPdffrom"web-print-pdf";/** 用户自助：弹窗打印 */exportfunctionuserPrintHtml(el){printJS({printable:el,type:"html",scanStyles:false});}/** 柜面静默：指定打印机 */exportasyncfunctioncounterSilentPrint(html,printOptions){returnwebPrintPdf.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-pdf11. 小结
- 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 为第三方开源库，请以官方文档为准。
