最简单的 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 安装,几行代码发起打印。
  • 后端/桌面端轻量部署,跨浏览器一致输出。
  • 满足静默、批量、定制纸张等专业需求。

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

相关推荐
小Tomkk6 分钟前
⭐️ StarRocks Web 使用介绍与实战指南
前端·ffmpeg
不一样的少年_10 分钟前
产品催: 1 天优化 Vue 官网 SEO?我用这个插件半天搞定(不重构 Nuxt)
前端·javascript·vue.js
-dcr11 分钟前
50.智能体
前端·javascript·人工智能·ai·easyui
行者9621 分钟前
Flutter跨平台开发适配OpenHarmony:进度条组件的深度实践
开发语言·前端·flutter·harmonyos·鸿蒙
云和数据.ChenGuang22 分钟前
Uvicorn 是 **Python 生态中用于运行异步 Web 应用的 ASGI 服务器**
服务器·前端·人工智能·python·机器学习
IT_陈寒24 分钟前
SpringBoot 3.0实战:这5个新特性让你的开发效率提升50%
前端·人工智能·后端
遗憾随她而去.32 分钟前
Webpack 面试题
前端·webpack·node.js
我要敲一万行33 分钟前
前端文件上传
前端·javascript
恋猫de小郭35 分钟前
Tailwind 因为 AI 的裁员“闹剧”结束,而 AI 对开源项目的影响才刚刚开始
前端·flutter·ai编程
要加油哦~35 分钟前
算法 | 整理数据结构 | 算法题中,JS 容器的选择
前端·javascript·算法