How do I run the "Page numbers" demo?

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

14 - Page numbers

Multi-page HTML with pageNumber overlay; use ySpace for bottom margin.

Page numbers: Multi-page HTML with pageNumber overlay; use ySpace for bottom margin. Run in the browser with Web Print Expert (fictional demo data).

Sample code

const multiPageHtml = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    html, body { margin: 0; padding: 0; }
    .mp-page {
      box-sizing: border-box;
      padding: 20px;
      font-family: "Microsoft YaHei", sans-serif;
      line-height: 1.65;
      page-break-after: always;
      break-after: page;
    }
    .mp-page:last-child {
      page-break-after: auto;
      break-after: auto;
    }
    .mp-note { margin: 0 0 8px; font-size: 11px; color: #a0aec0; }
    .mp-page h1 { font-size: 20px; margin: 0 0 8px; }
    .mp-page h2 { font-size: 16px; margin: 0 0 8px; }
  </style>
</head>
<body>
  <div class="mp-page">
    <p class="mp-note">DEMO ONLY · 多页版式演示</p>
    <h1>Web 打印专家 · 多页演示文档</h1>
    <p>本页用于演示多页 PDF 生成与页码叠加。下文条款均为虚构，不构成任何法律文件。</p>
  </div>
  <div class="mp-page">
    <h2>第二节 演示范围</h2>
    <p>乙方向甲方演示 Web 打印客户端及 npm 包 web-print-pdf 的集成方式，包括安装部署说明、API 调用示例与版本能力介绍。</p>
  </div>
  <div class="mp-page">
    <h2>第三节 演示说明</h2>
    <p>本样例中的金额、单号、公司与地址均为虚构。正式接入时请替换为您业务系统中的真实 HTML 模板。</p>
  </div>
</body>
</html>`;

await webPrintPdf.printHtml(multiPageHtml, {
  paperFormat: 'A4',
  pageNumber: {
    format: '第{{page}}页/共{{totalPage}}页',
    x: 'alignCenter',
    y: 'alignBottom',
    ySpace: 12,
    size: 10,
    color: 'rgb(102,102,102)'
  }
// …

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.

14 - Page numbers

Multi-page HTML with pageNumber overlay; use ySpace for bottom margin.

Sample code

const multiPageHtml = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    html, body { margin: 0; padding: 0; }
    .mp-page {
      box-sizing: border-box;
      padding: 20px;
      font-family: "Microsoft YaHei", sans-serif;
      line-height: 1.65;
      page-break-after: always;
      break-after: page;
    }
    .mp-page:last-child {
      page-break-after: auto;
      break-after: auto;
    }
    .mp-note { margin: 0 0 8px; font-size: 11px; color: #a0aec0; }
    .mp-page h1 { font-size: 20px; margin: 0 0 8px; }
    .mp-page h2 { font-size: 16px; margin: 0 0 8px; }
  </style>
</head>
<body>
  <div class="mp-page">
    <p class="mp-note">DEMO ONLY · 多页版式演示</p>
    <h1>Web 打印专家 · 多页演示文档</h1>
    <p>本页用于演示多页 PDF 生成与页码叠加。下文条款均为虚构，不构成任何法律文件。</p>
  </div>
  <div class="mp-page">
    <h2>第二节 演示范围</h2>
    <p>乙方向甲方演示 Web 打印客户端及 npm 包 web-print-pdf 的集成方式，包括安装部署说明、API 调用示例与版本能力介绍。</p>
  </div>
  <div class="mp-page">
    <h2>第三节 演示说明</h2>
    <p>本样例中的金额、单号、公司与地址均为虚构。正式接入时请替换为您业务系统中的真实 HTML 模板。</p>
  </div>
</body>
</html>`;

await webPrintPdf.printHtml(multiPageHtml, {
  paperFormat: 'A4',
  pageNumber: {
    format: '第{{page}}页/共{{totalPage}}页',
    x: 'alignCenter',
    y: 'alignBottom',
    ySpace: 12,
    size: 10,
    color: 'rgb(102,102,102)'
  }
// …

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

14 - Page numbers

Layout preview

Sample code

Result