如何运行「药房用药多页标签」在线样例？

安装并启动 Web打印专家客户端，在本页点击「运行打印」或「仅预览 PDF」。「药房用药多页标签」样例通过 web-print-pdf 连接本地 WebSocket 服务执行页面示例代码。

运行本样例是否需要在本地搭建 Vue 或 React 项目？

不需要。本页已内置 web-print-pdf 与示例代码，打开网页即可联调；正式接入时再在项目中 npm install web-print-pdf。

「药房用药多页标签」样例中的数据是真实业务数据吗？

不是。版式与金额均为虚构演示数据，仅用于展示 printHtml、水印、批量打印等 API 效果，不具备法律效力或物流效力。

在线样例

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

08 - 药房用药多页标签

单份 HTML 内排列多张用药标签，每张固定 50mm×30mm 并用 CSS page-break-after 分页，一次预览/打印输出多页 PDF（本例 3 张）。须写 html, body { margin: 0; padding: 0; }，且每张标签 height 与 pdfOptions.height 一致。实际打印时 printOptions.paperFormat 须填当前打印机物理纸名（getPrinterPapers 查询）。

药房用药多页标签：单份 HTML 内排列多张用药标签，每张固定 50mm×30mm 并用 CSS page-break-after 分页，一次预览/打印输出多页 PDF（本例 3 张）。须写 html, body { margin: 0; padding: 0; }

示例代码

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>`;
// …

以下为静态摘要；启用 JavaScript 可查看完整可运行代码。

返回在线样例列表

左侧浏览样例目录，右侧查看版式预览与示例代码；点击运行即可通过 web-print-pdf 驱动本地客户端完成静默打印或 PDF 预览。使用前请先安装并启动客户端。

客户端

若打印或预览效果与预期不符，请务必先从官网下载并安装最新版 Web打印专家客户端后再试（旧版本可能导致版式偏差）。

版式说明

版式预览与打印输出完全遵循 HTML/CSS 标准样式，没有隐藏的渲染技巧：样式写成什么样，页面就长成什么样。

08 - 药房用药多页标签

示例代码

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>`;
// …

运行结果

样例优先加载本站内置 web-print-pdf，与 npm 包 API 一致；失败时回退 CDN。
客户端内置「运行示例」页（vueApp/.../examples/index.vue）提供更多可编辑 demo，与本页样例互补。
工具类样例（连接检测、打印机列表等）仅返回 JSON，不触发打印。

免费下载客户端查看 npm 包