如何运行「页码叠加」在线样例？

安装并启动 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; }

14 - 页码叠加

多页 HTML + pageNumber 显示「当前页/总页」；底部对齐时用 ySpace 留出边距。

页码叠加：多页 HTML + pageNumber 显示「当前页/总页」；底部对齐时用 ySpace 留出边距。安装 Web打印专家客户端后在浏览器运行（虚构演示数据）。

示例代码

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)'
  }
// …

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

返回在线样例列表

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

客户端

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

版式说明

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

14 - 页码叠加

多页 HTML + pageNumber 显示「当前页/总页」；底部对齐时用 ySpace 留出边距。

示例代码

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)'
  }
// …

运行结果

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

免费下载客户端查看 npm 包