hiprint 与 web-print-pdf 选型对比

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

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

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

---

1. 一句话定位

方案	一句话
hiprint	在浏览器里拖拽设计 打印模板，预览为 HTML/CSS，打印多走浏览器打印能力
web-print-pdf	用现有 HTML/CSS 描述版式，经本地 Web打印专家 转 PDF 并静默送到指定打印机

关键差异：柜面「不弹对话框、指定打印机」→ 通常需要 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. 功能对照

能力	hiprint	web-print-pdf
可视化拖拽设计	✅ 核心能力	❌ 不提供（用 HTML/CSS）
模板保存 / 复用	✅	✅（HTML 模板 / 服务端存储）
条码 / 二维码	✅ 内置	✅（HTML 或图片）
浏览器内 HTML 预览	✅	✅（preview 模式）
PDF 精确预览	⚠️ 非核心	✅
静默打印	❌ 一般需用户确认	✅
指定 printerName	❌	✅
batchPrint	⚠️ 自行编排	✅
远程打印	❌	✅
跨平台静默	⚠️ 受浏览器限制	✅（随客户端）

---

4. hiprint 更适合的场景

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

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

hiprint.init();
const template = new hiprint.PrintTemplate();
const panel = 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。

预览 + 打印示例：

import webPrintPdf from "web-print-pdf";

// 1. 预览
const preview = await webPrintPdf.printHtml(
  html,
  { paperFormat: "A4", printBackground: true },
  { paperFormat: "A4" },
  { action: "preview" }
);
window.open(preview.printPreviewUrl);

// 2. 确认后静默出纸
await webPrintPdf.printHtml(
  html,
  { paperFormat: "A4", printBackground: true },
  { printerName: "前台打印机", copies: 1 },
  { action: "print" }
);

---

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

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

环节	工具
模板设计 / 业务微调	hiprint 设计器
定稿 HTML	导出或同步为 HTML 片段
生产静默打印	web-print-pdf + Web打印专家

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

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

---

7. 开发体验对比

维度	hiprint	web-print-pdf
学习成本	设计器 + hiprint API	HTML/CSS + npm API
与 Vue/React	可集成，偏传统脚本	原生 ES Module
样式控制	面板坐标 + 部分 style	完整 CSS / @media print
调试	设计器预览	preview URL + 客户端日志
终端依赖	无（浏览器即可设计）	需 Web打印专家出纸

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

---

8. 选型建议

你的需求	建议
只要设计器、手动打印	hiprint
只要静默、指定机、批量	web-print-pdf
既要设计器又要静默	组合
全平台国产 OS + Windows	出纸用 web-print-pdf
纯内网 OA，用户习惯点打印	hiprint 或 window.print 即可

---

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 为开源/社区打印设计组件，请以官方仓库文档为准。