Print.jsnpm 包名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-pdfnpmhttps://www.npmjs.com/package/web-print-pdfPrint.js 官网https://printjs.crabbly.com/GitHubweb-print-pdfhttps://github.com/weixiaoyi/web-print-pdf1. 核心差异30 秒版Print.jsweb-print-pdf本质封装window.print()/ iframe 打印WebSocket 调本地Web打印专家打印对话框✅会弹出✅ 可静默action: print指定打印机❌✅printerName终端安装❌ 无✅ 需 Web打印专家npm 体积小小逻辑在客户端典型场景后台导出、用户自助打一份柜面、批量、无人值守结论前置Print.js 适合「用户自己确认打印」web-print-pdf 适合「系统必须把纸打出来」。2. Print.js 工作原理Print.js 常见用法与本项目vueApp中工具函数类似importprintJSfromprint-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 工作原理importwebPrintPdffromweb-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 引擎生成PDFWindowsSumatraPDFLinux/macOSCUPSlp无浏览器打印框静默客户端记录日志可排查失败原因4. 能力对照表能力Print.jsweb-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: urlprintPdfByUrl(url, …)style: ...写进 HTMLstyle或页面 CSSscanStyles: falseprintBackground: true等pdfOptions用户选打印机getPrinterList()printerName无客户端部署Web打印专家迁移最小步骤安装客户端http://webprintpdf.com/downloadApp/npm install web-print-pdf把printJS({ type:html, … })换成printHtml用action: preview对比版式后再改print8. 能否同时保留两者可以按入口区分importprintJSfromprint-js;importwebPrintPdffromweb-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-pdf9. 与 window.print 的关系Print.js不是Lodop 类本地服务它本质仍是浏览器打印入口的糖Print.js ≈ 更好的 window.printHTML/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-pdfhttps://www.npmjs.com/package/web-print-pdf下载客户端http://webprintpdf.com/downloadApp/Print.js 为第三方开源库请以官方文档为准。
