在线样例
左侧浏览样例目录，右侧查看版式预览与示例代码；点击运行即可通过 web-print-pdf 驱动本地客户端完成静默打印或 PDF 预览。使用前请先 安装并启动客户端。
客户端
若打印或预览效果与预期不符，请务必先从官网下载并安装最新版 Web打印专家客户端后再试（旧版本可能导致版式偏差）。
版式说明
版式预览与打印输出完全遵循 HTML/CSS 标准样式，没有隐藏的渲染技巧：样式写成什么样，页面就长成什么样。
23 - 批量演示包裹贴
batchPrint 批量演示包裹贴。pdf 用 width/height 排版时，实际打印须在 printOptions 指定当前打印机物理 paperFormat（getPrinterPapers 查询）。
版式预览
示例代码
const labelWidth = '100mm';
const labelHeight = '80mm';
const labelHtml = (n) => `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
html, body { margin: 0; padding: 0; }
.label {
width: ${labelWidth};
height: ${labelHeight};
border: 1px solid #333;
padding: 8mm;
font-family: Arial, sans-serif;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="label">
<div style="font-size:10px;color:#999;margin-bottom:4px">DEMO ONLY · 非真实物流面单</div>
<div style="font-size:11px;color:#666">WP 演示物流 · 样例包裹贴</div>
<div style="font-size:16px;font-weight:bold;margin:6px 0">收件人（虚构）：陈晓雯</div>
<div style="font-size:12px">浙江省杭州市滨江区网商路 520 号</div>
<div style="margin-top:8px;font-size:20px;font-weight:bold;letter-spacing:2px">包裹编号 WP-${n}</div>
</div>
</body>
</html>`;
await webPrintPdf.batchPrint([
{ type: 'printHtml', data: labelHtml('001'), pdfOptions: { width: labelWidth, height: labelHeight, margin: { top: '0', bottom: '0', left: '0', right: '0' } } },
{ type: 'printHtml', data: labelHtml('002'), pdfOptions: { width: labelWidth, height: labelHeight, margin: { top: '0', bottom: '0', left: '0', right: '0' } } },
{ type: 'printHtml', data: labelHtml('003'), pdfOptions: { width: labelWidth, height: labelHeight, margin: { top: '0', bottom: '0', left: '0', right: '0' } } }
], {}, {
// 实际打印：批量默认 printOptions，paperFormat 须为当前打印机物理纸名
paperFormat: '100x80',
copies: 1
});运行结果
- 样例优先加载本站内置
web-print-pdf，与 npm 包 API 一致；失败时回退 CDN。 - 客户端内置「运行示例」页（
vueApp/.../examples/index.vue）提供更多可编辑 demo，与本页样例互补。 - 工具类样例（连接检测、打印机列表等）仅返回 JSON，不触发打印。