如何运行「打印在线 HTML 页」在线样例？

安装并启动 Web打印专家客户端，在本页点击「运行打印」或「仅预览 PDF」。「打印在线 HTML 页」样例通过 web-print-pdf 连接本地 WebSocket 服务执行页面示例代码。

运行本样例是否需要在本地搭建 Vue 或 React 项目？

不需要。本页已内置 web-print-pdf 与示例代码，打开网页即可联调；正式接入时再在项目中 npm install web-print-pdf。

「打印在线 HTML 页」样例中的数据是真实业务数据吗？

不是。版式与金额均为虚构演示数据，仅用于展示 printHtml、水印、批量打印等 API 效果，不具备法律效力或物流效力。

在线样例

.demo-compat-banner--noscript { display: block !important; }

16 - 打印在线 HTML 页

printHtmlByUrl 打印 webprintpdf.com 官网首页，彩色出纸。

打印在线 HTML 页：printHtmlByUrl 打印 webprintpdf.com 官网首页，彩色出纸。安装 Web打印专家客户端后在浏览器运行（虚构演示数据）。

示例代码

await webPrintPdf.printHtmlByUrl(
  'https://webprintpdf.com/',
  { paperFormat: 'A4', printBackground: true },
  { paperFormat: 'A4', colorful: true },
  { requestTimeout: 20 }
);

返回在线样例列表

左侧浏览样例目录，右侧查看版式预览与示例代码；点击运行即可通过 web-print-pdf 驱动本地客户端完成静默打印或 PDF 预览。使用前请先安装并启动客户端。

客户端

若打印或预览效果与预期不符，请务必先从官网下载并安装最新版 Web打印专家客户端后再试（旧版本可能导致版式偏差）。

版式说明

版式预览与打印输出完全遵循 HTML/CSS 标准样式，没有隐藏的渲染技巧：样式写成什么样，页面就长成什么样。

16 - 打印在线 HTML 页

printHtmlByUrl 打印 webprintpdf.com 官网首页，彩色出纸。

示例代码

await webPrintPdf.printHtmlByUrl(
  'https://webprintpdf.com/',
  { paperFormat: 'A4', printBackground: true },
  { paperFormat: 'A4', colorful: true },
  { requestTimeout: 20 }
);

运行结果

若无法打印或连接客户端失败，请参阅本地Print succeeded，上线后无法打印？（HTTP 业务系统上线后常见）。
客户端内置「运行示例」页（vueApp/.../examples/index.vue）提供更多可编辑 demo，与本页样例互补。
工具类样例（连接检测、打印机列表等）仅返回 JSON，不触发打印。

免费下载客户端查看 npm 包