Live demos
Browse the sample list on the left and preview layouts plus sample code on the right. Run a demo to print silently or preview PDF via web-print-pdf and the local client. Install and launch the client first.
If results look wrong, install the latest Web Print Expert client from our site first (older builds may cause layout drift).
Preview and print follow standard HTML/CSS only—no hidden tricks. What you style is what you get.
12 - Custom paper size
Use pdf width + height (omit paperFormat). Note: pdfOptions.margin: 0 only sets PDF page margins—it does not reset the HTML body default margin (~8px). For small custom sizes, set html, body { margin: 0; padding: 0; } in your HTML (see labelHtml below), or content height exceeds the page and you get an extra blank page. Set printOptions.paperFormat from getPrinterPapers for real printing.
Layout preview
Sample code
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.printHtml(labelHtml('DEMO-001'), {
width: labelWidth,
height: labelHeight,
margin: { top: '0', bottom: '0', left: '0', right: '0' }
}, {
// 实际打印：须指定当前打印机上的物理纸张（名称以 getPrinterPapers 返回为准）
paperFormat: '100x80'
});Result
- Demos load bundled
web-print-pdffirst (same API as npm); CDN is used as fallback. - The client’s built-in Run examples page has more editable demos; this page complements it.
- Utility demos (connection, printer list) return JSON only—no print job.