企业官网建设流程全解析

做 Web 报表时，hiprint与web-print-pdf经常被放在一起问：「都能预览，都能打，选哪个？」

两者定位并不完全重叠：hiprint 偏可视化打印设计器 + 浏览器打印；web-print-pdf 偏HTML/CSS 出纸 + 本地客户端静默打印 + PDF 预览。官网专题《hiprint 与 web-print-pdf 预览打印插件的比较》对两者有详细讨论，本文在 AIdocs 系列中提炼选型要点，并说明如何组合使用。

1. 一句话定位

关键差异：柜面「不弹对话框、指定打印机」→ 通常需要 web-print-pdf 这类本地客户端方案；「业务人员自己拖模板、先预览再手动打」→ hiprint 的设计器更有优势。

2. 架构对比

2.1 hiprint

hiprint 设计器（面板 + 文本/表格/条码/二维码…） │ ▼ 预览 HTML / CSS │ ▼ 浏览器 window.print / 插件辅助 │ ▼ 用户选择打印机（通常有对话框）

特点：

• 可视化设计：PrintTemplate、addPrintPanel、addPrintText等 API。
• 组件丰富：文本、表格、长文、条码、二维码、线条等。
• 依赖 jQuery与传统脚本引入方式（以官方文档为准）。
• 打印链路绑定浏览器，静默与指定打印机能力有限。

2.2 web-print-pdf

业务 HTML / CSS（或 hiprint 导出的 HTML） │ ▼ web-print-pdf（WebSocket） │ ▼ Web打印专家：Playwright → PDF → 系统打印栈 │ ▼ 静默出纸 / 或 preview 返回 printPreviewUrl

特点：

• 无需设计器也能工作：直接printHtml(片段)。
• action: 'preview'返回 PDF 预览地址；action: 'print'静默出纸。
• 需安装Web打印专家；支持 Windows / macOS / 统信 / 麒麟。

3. 功能对照

4. hiprint 更适合的场景

1. 实施 / 业务人员需要自己调整模板位置，研发不想改 CSS。
2. 打印要求「预览 + 用户点打印」即可，不要求静默。
3. 模板以固定面板 + 条码/二维码为主，已在 hiprint 生态内。
4. 快速 PoC：引入 JS + 设计器 div即可演示。

示例（hiprint 典型流程，摘自官方用法）：

hiprint.init();consttemplate=newhiprint.PrintTemplate();constpanel=template.addPrintPanel({width:100,height:130});panel.addPrintText({options:{width:140,height:15,top:20,left:20,title:"标题",textAlign:"center"},});template.design("#templateDesignDiv");

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

1. 柜面 / 窗口：必须静默、指定打印机、连打多张。
2. 版式已由Vue / React 组件 + CSS实现，希望打印即所见。
3. 需要PDF 预览与最终出纸同一套渲染（减少「预览一套、打印一套」）。
4. 统信 UOS、银河麒麟、macOS与 Windows 混部。
5. 需要printHtmlByUrl拉内网报表，并带 Cookie / Header。

预览 + 打印示例：

importwebPrintPdffrom"web-print-pdf";// 1. 预览constpreview=awaitwebPrintPdf.printHtml(html,{paperFormat:"A4",printBackground:true},{paperFormat:"A4"},{action:"preview"});window.open(preview.printPreviewUrl);// 2. 确认后静默出纸awaitwebPrintPdf.printHtml(html,{paperFormat:"A4",printBackground:true},{printerName:"前台打印机",copies:1},{action:"print"});

6. 推荐组合：hiprint 设计，web-print-pdf 出纸

很多项目可以这样拆职责：

这样保留 hiprint 的设计体验，又满足静默与跨平台——不必强行用 hiprint 独自承担出纸。

hiprint.design() → 得到 HTML ↓ webPrintPdf.printHtml(html, …, { action: 'print' })

7. 开发体验对比

官网专题指出：web-print-pdf 的优势之一是「前端能写出来的 layout，PDF 与纸面一致」——适合研发主导的项目；hiprint 的优势是「非研发也能改模板」。

8. 选型建议

9. 小结

• hiprint解决「模板怎么设计、怎么在浏览器里预览」。
• web-print-pdf + Web打印专家解决「怎么静默、指定打印机、跨平台出纸」。
• 对立选型不如组合：设计用 hiprint，生产打印用 web-print-pdf。

客户端下载：http://webprintpdf.com/downloadApp/
更多 API 见 npm：https://www.npmjs.com/package/web-print-pdf

hiprint 为开源/社区打印设计组件，请以官方仓库文档为准。