最简单的 Web 打印方案:用 5 分钟上手 web-print-pdf(npm 包)

这篇文章给出一条"开箱即用、稳定、跨浏览器"的 Web 打印最简路线:使用 web-print-pdf(npm 包)。不需要安装浏览器插件、无需控件注册表操作,也不用学习繁琐的打印脚本,只需几行代码即可把 HTML、PDF、图片精准送到打印机。

为什么选择 web-print-pdf

  • 简单:API 极简,常见打印需求(PDF/HTML/图片、静默打印、批量打印)一步到位。
  • 可靠:通过本地服务与 Electron/无头内核协作,规避浏览器安全限制与差异。
  • 可控:纸张大小、方向、边距、份数、目标打印机、队列、并发都可配置。
  • 可移植:前端 npm 生态集成方便,后端、桌面端、混合架构都能无缝接入。

相比传统方案:

  • 和 Lodop 一类控件相比:无需控件安装、证书、浏览器兼容适配,前端接入更轻量。
  • 和纯浏览器方案相比:无需依赖用户交互弹窗或浏览器实验开关,静默打印更稳定。
  • 和重型可视化模板库相比:更聚焦"把已生成的内容稳妥印出",学习成本更低。

5 分钟快速上手

1)安装
bash 复制代码
npm i web-print-pdf

确保运行时已部署本地打印服务(项目提供 Electron 打包与一键安装能力);前端仅调用 API 即可。

2)打印 PDF(最常见场景)
js 复制代码
import { printPdfByUrl } from 'web-print-pdf';

async function quickPrint() {
  await printPdfByUrl({
    url: 'https://example.com/order.pdf',
    printer: 'HP-LaserJet',
    copies: 1,
    duplex: false,
    paper: 'A4',
    silent: true,
  });
}
3)打印 HTML(自动生成或远程页面)
js 复制代码
import { printHtmlByUrl, printHtmlByBase64 } from 'web-print-pdf';

// 远程 URL
await printHtmlByUrl({ url: 'https://example.com/preview.html', silent: true });

// Base64 字符串(适合前端动态生成的 DOM + 样式)
await printHtmlByBase64({ base64: btoa('<html>...</html>'), silent: true });
4)打印图片
js 复制代码
import { printImageByUrl, printImageByBase64 } from 'web-print-pdf';

await printImageByUrl({ url: 'https://example.com/ticket.png', silent: true });

典型业务场景

  • 电商/仓配:批量面单、拣货单、出库单静默打印;支持队列与并发控制,防止卡顿。
  • 连锁零售:小票、价签、标签快速打印,指定门店默认打印机自动落盘。
  • 医院/政务:表单、回执、凭证批量打印;纸张与边距严格可控,满足合规要求。
  • 制造/物流:工艺卡/条码标签打印;支持图片、PDF 混合任务一并下发。

配置项一览(常用)

  • printer:目标打印机名称(不填则走系统默认)。
  • silent:静默打印,跳过系统弹窗。
  • paper / orientation / margin:纸张、方向、边距。
  • copies / collate / duplex:份数、逐份、单双面。
  • timeout / queue:任务超时与队列并发控制。

小贴士:实际可用参数会因驱动与机型差异有所不同,建议先通过打印机列表与纸型查询接口进行校验。

和其它方案的对比

  • 对比 Lodop:无需安装与授权,API 与前端生态更友好;同时保留纸型与静默能力。
  • 对比 hiprint:后者偏重可视化模板设计,适合"模板搭建";web-print-pdf 则专注"把内容稳定印出",二者可互补。
  • 对比浏览器原生 window.print:无需用户点击、可静默、可选打印机、可批量、可并发。

最佳实践

  • 模板与内容分离:在前端或服务端产出 HTML/PDF;打印层只负责传递与落盘,系统职责更清晰。
  • 队列化与幂等:开启任务队列与重试,保证高峰期不丢单、不重复。
  • 打印机能力探测:启动时拉取打印机列表/纸型,给出"推荐设置"与"异常告警"。
  • 可观测性:接入日志与埋点,记录任务 ID、耗时、打印机响应;问题可追溯。

常见问题

Q:支持哪些浏览器? 只要能调用前端接口即可,核心能力由本地服务/Electron 内核承担,规避浏览器差异。

Q:如何静默打印? 设置 silent: true,以及在部署时开启本地服务对应权限配置即可。

Q:如何指定纸张和边距? 通过 papermarginorientation 等参数,并结合打印机驱动能力。

Q:能否批量任务并发? 内置队列与并发控制,避免阻塞;也可按业务维度分组串行。

结语

如果你的目标是"最短时间把内容稳定打印出来",web-print-pdf(npm 包)就是当前最简单、最有效的路径:

  • 前端一行 npm 安装,几行代码发起打印。
  • 后端/桌面端轻量部署,跨浏览器一致输出。
  • 满足静默、批量、定制纸张等专业需求。

现在就为你的项目加入可靠的打印能力吧。

相关推荐
passerby60615 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了5 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅5 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅5 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅6 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment6 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅6 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊6 小时前
jwt介绍
前端
爱敲代码的小鱼6 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax
Cobyte6 小时前
AI全栈实战:使用 Python+LangChain+Vue3 构建一个 LLM 聊天应用
前端·后端·aigc