How do I run the "Batch demo labels" demo?

Install and launch Web Print Expert, then click Run print or Preview PDF on this page. The "Batch demo labels" demo runs the sample code with web-print-pdf over the local WebSocket service.

Do I need a local Vue or React project for this demo?

No. This page bundles web-print-pdf and editable sample code—you can run it directly in the browser.

Is the data in the "Batch demo labels" demo real?

No. All layouts, amounts, and names are fictional demo data for API illustration only.

Live demos

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

23 - Batch demo labels

Batch demo labels. When pdf uses width/height, printOptions.paperFormat must match the printer stock from getPrinterPapers.

Batch demo labels: Batch demo labels. When pdf uses width/height, printOptions.paperFormat must match the printer stock from getPrinterPapers

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.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
});

Back to all 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.

Client

If results look wrong, install the latest Web Print Expert client from our site first (older builds may cause layout drift).

Layout

Preview and print follow standard HTML/CSS only—no hidden tricks. What you style is what you get.

23 - Batch demo labels

Batch demo labels. When pdf uses width/height, printOptions.paperFormat must match the printer stock from getPrinterPapers.

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.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
});

Result

Demos load bundled web-print-pdf first (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.

Download client free View npm package

23 - Batch demo labels

Layout preview

Sample code

Result