在线样例
左侧浏览样例目录,右侧查看版式预览与示例代码;点击运行即可通过 web-print-pdf 驱动本地客户端完成静默打印或 PDF 预览。使用前请先 安装并启动客户端。
客户端
若打印或预览效果与预期不符,请务必先从官网下载并安装最新版 Web打印专家客户端后再试(旧版本可能导致版式偏差)。
版式说明
版式预览与打印输出完全遵循 HTML/CSS 标准样式,没有隐藏的渲染技巧:样式写成什么样,页面就长成什么样。
02 - 完整 HTML 文档
传入带 <html>、<head>、<style> 的完整 HTML 字符串,样式写在文档内。
版式预览
示例代码
const html = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
body { font-family: "Microsoft YaHei", sans-serif; padding: 24px; }
h1 { color: #005AAC; }
.card { background: #f7fafc; padding: 16px; border-radius: 8px; }
</style>
</head>
<body>
<h1>Web打印专家</h1>
<div class="card">完整 HTML 文档,样式在 <style> 中定义。</div>
</body>
</html>`;
await webPrintPdf.printHtml(html, {
paperFormat: 'A4',
printBackground: true,
margin: { top: '15mm', bottom: '15mm' }
}, {
paperFormat: 'A4'
});
运行结果
- 样例优先加载本站内置
web-print-pdf,与 npm 包 API 一致;失败时回退 CDN。 - 客户端内置「运行示例」页(
vueApp/.../examples/index.vue)提供更多可编辑 demo,与本页样例互补。 - 工具类样例(连接检测、打印机列表等)仅返回 JSON,不触发打印。