如何运行「80mm 演示小票」在线样例？

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

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

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

「80mm 演示小票」样例中的数据是真实业务数据吗？

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

在线样例

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

07 - 80mm 演示小票

pdf 用 width + height（80mm×80mm）排版。HTML 须写 html, body { margin: 0; padding: 0; }（见下方 receiptHtml），避免 body 默认边距导致多页。实际打印时 printOptions.paperFormat 须填当前打印机物理纸名（getPrinterPapers 查询，勿省略）。

80mm 演示小票：pdf 用 width + height（80mm×80mm）排版。HTML 须写 html, body { margin: 0; padding: 0; }（见下方 receiptHtml），避免 body 默认边距导致多页。

示例代码

const receiptWidth = '80mm';
const receiptHeight = '80mm';

const receiptHtml = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    html, body { margin: 0; padding: 0; }
    .receipt {
      width: ${receiptWidth};
      box-sizing: border-box;
      font-family: monospace;
      padding: 4mm;
      font-size: 11px;
      line-height: 1.45;
    }
  </style>
</head>
<body>
  <div class="receipt">
  <div style="text-align:center;font-size:10px;color:#666;margin-bottom:4px">【演示小票 · 非真实交易】</div>
  <div style="text-align:center;font-size:14px;font-weight:bold;margin-bottom:6px">溪边良品小铺（虚构）</div>
  <div style="text-align:center;margin-bottom:8px">杭州市拱墅区运河畔路 18 号</div>
  <div>演示单号：WP-POS-240624-1024</div>
  <div>打印时间：2026-06-24 14:32:08</div>
  <div style="border-top:1px dashed #333;margin:8px 0;padding-top:6px">
    燕麦拿铁 400ml ×1 .... ¥22.00<br>
    全麦三明治 ×1 ........ ¥15.00<br>
    蓝莓司康 ×2 .......... ¥18.00
  </div>
  <div style="border-top:1px dashed #333;margin-top:8px;padding-top:6px;font-weight:bold">
    演示合计：¥55.00<br>支付方式：演示扫码
  </div>
  <div style="text-align:center;margin-top:10px;font-size:10px">web-print-pdf 热敏纸版式演示</div>
  </div>
</body>
</html>`;

await webPrintPdf.printHtml(receiptHtml, {
  width: receiptWidth,
  height: receiptHeight,
  margin: { top: '2mm', bottom: '2mm', left: '2mm', right: '2mm' },
  printBackground: true
}, {
  // 实际打印：须指定当前打印机上的物理纸张（名称以 getPrinterPapers 返回为准）
  paperFormat: '80mm Series'
});

返回在线样例列表

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

客户端

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

版式说明

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

07 - 80mm 演示小票

示例代码

const receiptWidth = '80mm';
const receiptHeight = '80mm';

const receiptHtml = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    html, body { margin: 0; padding: 0; }
    .receipt {
      width: ${receiptWidth};
      box-sizing: border-box;
      font-family: monospace;
      padding: 4mm;
      font-size: 11px;
      line-height: 1.45;
    }
  </style>
</head>
<body>
  <div class="receipt">
  <div style="text-align:center;font-size:10px;color:#666;margin-bottom:4px">【演示小票 · 非真实交易】</div>
  <div style="text-align:center;font-size:14px;font-weight:bold;margin-bottom:6px">溪边良品小铺（虚构）</div>
  <div style="text-align:center;margin-bottom:8px">杭州市拱墅区运河畔路 18 号</div>
  <div>演示单号：WP-POS-240624-1024</div>
  <div>打印时间：2026-06-24 14:32:08</div>
  <div style="border-top:1px dashed #333;margin:8px 0;padding-top:6px">
    燕麦拿铁 400ml ×1 .... ¥22.00<br>
    全麦三明治 ×1 ........ ¥15.00<br>
    蓝莓司康 ×2 .......... ¥18.00
  </div>
  <div style="border-top:1px dashed #333;margin-top:8px;padding-top:6px;font-weight:bold">
    演示合计：¥55.00<br>支付方式：演示扫码
  </div>
  <div style="text-align:center;margin-top:10px;font-size:10px">web-print-pdf 热敏纸版式演示</div>
  </div>
</body>
</html>`;

await webPrintPdf.printHtml(receiptHtml, {
  width: receiptWidth,
  height: receiptHeight,
  margin: { top: '2mm', bottom: '2mm', left: '2mm', right: '2mm' },
  printBackground: true
}, {
  // 实际打印：须指定当前打印机上的物理纸张（名称以 getPrinterPapers 返回为准）
  paperFormat: '80mm Series'
});

运行结果

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

免费下载客户端查看 npm 包