How do I run the "Pharmacy multi-page labels" demo?

Install and launch Web Print Expert, then click Run print or Preview PDF on this page. The "Pharmacy multi-page 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 "Pharmacy multi-page 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; }

08 - Pharmacy multi-page labels

Multiple 50mm×30mm drug labels in one HTML string; each block uses page-break-after so one printHtml call yields a multi-page PDF (3 pages here). Set html, body { margin: 0; padding: 0; } and match label height to pdfOptions.height. Set printOptions.paperFormat from getPrinterPapers for real printing.

Pharmacy multi-page labels: Multiple 50mm×30mm drug labels in one HTML string; each block uses page-break-after so one printHtml call yields a multi-page PDF (3 pag…

Sample code

const rxLabelWidth = '50mm';
const rxLabelHeight = '30mm';

const rxItems = [
  { patient: '林晓月', gender: '女', age: '42岁', drug: '维生素B1片', spec: '5mg×100片/瓶 × 42片', usage: '口服 每次2片 每日3次', note: '' },
  { patient: '林晓月', gender: '女', age: '42岁', drug: '甲钴胺片', spec: '0.5mg×20片/盒 × 30片', usage: '口服 每次1片 每日3次', note: '' },
  { patient: '林晓月', gender: '女', age: '42岁', drug: '仙灵骨葆胶囊', spec: '0.4g×30粒/盒 × 60粒', usage: '口服 每次2粒 每日2次', note: '' }
];

const rxLabelsHtml = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    /* 去掉浏览器默认边距，否则小尺寸纸张容易多出一页空白 */
    html, body { margin: 0; padding: 0; }
    .rx-label {
      /* 单张标签物理尺寸，须与 pdfOptions.width / height 一致 */
      width: ${rxLabelWidth};
      height: ${rxLabelHeight};
      box-sizing: border-box;
      padding: 1.2mm 2mm;
      font-family: "Microsoft YaHei", SimHei, sans-serif;
      font-size: 7.5pt;
      line-height: 1.32;
      /* 打印/PDF 分页：每张标签后换一页（仅分页介质生效，屏幕浏览无效） */
      page-break-after: always;  /* 旧属性，兼容性好 */
      break-after: page;         /* 新标准，page 为关键字，表示「此元素后强制分页」 */
      overflow: hidden;          /* 内容超出固定页高时裁切，避免撑出额外页 */
    }
    /* 最后一张不再分页，避免 PDF 末尾多一页空白 */
    .rx-label:last-child {
      page-break-after: auto;
      break-after: auto;
    }
    .rx-head { font-weight: bold; font-size: 8.5pt; margin-bottom: 0.6mm; }
    .rx-drug { margin-bottom: 0.4mm; }
    .rx-line { font-size: 7pt; }
  </style>
</head>
<body>
${rxItems.map(item => `  <div class="rx-label">
    <div class="rx-head">${item.patient}　${item.gender}　${item.age}</div>
    <div class="rx-drug">${item.drug}</div>
    <div class="rx-line">规格: ${item.spec}</div>
    <div class="rx-line">用法: ${item.usage}</div>
    <div class="rx-line">备注: ${item.note}</div>
  </div>`).join('\n')}
</body>
</html>`;
// …

Static excerpt below; enable JavaScript on this page for the full runnable sample.

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.

08 - Pharmacy multi-page labels

Sample code

const rxLabelWidth = '50mm';
const rxLabelHeight = '30mm';

const rxItems = [
  { patient: '林晓月', gender: '女', age: '42岁', drug: '维生素B1片', spec: '5mg×100片/瓶 × 42片', usage: '口服 每次2片 每日3次', note: '' },
  { patient: '林晓月', gender: '女', age: '42岁', drug: '甲钴胺片', spec: '0.5mg×20片/盒 × 30片', usage: '口服 每次1片 每日3次', note: '' },
  { patient: '林晓月', gender: '女', age: '42岁', drug: '仙灵骨葆胶囊', spec: '0.4g×30粒/盒 × 60粒', usage: '口服 每次2粒 每日2次', note: '' }
];

const rxLabelsHtml = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    /* 去掉浏览器默认边距，否则小尺寸纸张容易多出一页空白 */
    html, body { margin: 0; padding: 0; }
    .rx-label {
      /* 单张标签物理尺寸，须与 pdfOptions.width / height 一致 */
      width: ${rxLabelWidth};
      height: ${rxLabelHeight};
      box-sizing: border-box;
      padding: 1.2mm 2mm;
      font-family: "Microsoft YaHei", SimHei, sans-serif;
      font-size: 7.5pt;
      line-height: 1.32;
      /* 打印/PDF 分页：每张标签后换一页（仅分页介质生效，屏幕浏览无效） */
      page-break-after: always;  /* 旧属性，兼容性好 */
      break-after: page;         /* 新标准，page 为关键字，表示「此元素后强制分页」 */
      overflow: hidden;          /* 内容超出固定页高时裁切，避免撑出额外页 */
    }
    /* 最后一张不再分页，避免 PDF 末尾多一页空白 */
    .rx-label:last-child {
      page-break-after: auto;
      break-after: auto;
    }
    .rx-head { font-weight: bold; font-size: 8.5pt; margin-bottom: 0.6mm; }
    .rx-drug { margin-bottom: 0.4mm; }
    .rx-line { font-size: 7pt; }
  </style>
</head>
<body>
${rxItems.map(item => `  <div class="rx-label">
    <div class="rx-head">${item.patient}　${item.gender}　${item.age}</div>
    <div class="rx-drug">${item.drug}</div>
    <div class="rx-line">规格: ${item.spec}</div>
    <div class="rx-line">用法: ${item.usage}</div>
    <div class="rx-line">备注: ${item.note}</div>
  </div>`).join('\n')}
</body>
</html>`;
// …

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

08 - Pharmacy multi-page labels

Layout preview

Sample code

Result