How do I run the "80mm demo receipt" demo?

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

07 - 80mm demo receipt

pdf uses width + height (80mm×80mm). Set html, body { margin: 0; padding: 0; } in HTML (see receiptHtml below) to avoid extra pages from default body margin. Set printOptions.paperFormat from getPrinterPapers for real printing.

Demo "80mm demo receipt" — pdf uses width + height (80mm×80mm). Set html, body { margin: 0; padding: 0 web-print-pdf live demo.

Sample code

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

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.

07 - 80mm demo receipt

Sample code

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

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

07 - 80mm demo receipt

Layout preview

Sample code

Result