JS如何实现打印PDF时带对应页码的动态目录生成

核心逻辑：浏览器打印分页的规则完全由你定义的打印样式决定，不需要等用户手动触发打印操作，只要锁死版式规则就能提前精准计算页码。

方案一：固定版式预计算（React项目适配性最高，无兼容性问题） #

• 第一步先锁死打印版式规则，在全局打印样式中明确纸张参数，清除浏览器默认打印的不确定占位：

  /* 固定打印纸张为A4纵向，设置统一页边距 */
  @page {
    size: A4 portrait;
    margin: 18mm 15mm;
    /* 清除浏览器默认页眉页脚的默认边距占位 */
    @top-center, @bottom-center { content: none; }
  }
  @media print {
    html, body { margin: 0; padding: 0; }
    /* 所有独立章节强制分页，避免内容串页 */
    .pdf-cover, .toc-section, .customer-detail-block, .pdf-back-cover {
      break-after: page;
      page-break-after: always;
    }
    /* 禁止标题、表格行等内容被分页截断，避免高度计算偏差 */
    h2, h3, tr, .customer-info-card {
      break-inside: avoid;
      page-break-inside: avoid;
    }
  }
  

• 第二步拿到当前渲染环境下的单页内容区精确高度：临时插入一个高度为100mm的无样式空div，读取它的offsetHeight算出mm到px的换算比例，再结合你在@page里设置的页边距，算出单页内容区的总像素高度，不要硬编码DPI换算值，避免不同设备渲染差异导致误差。
• 第三步等所有动态内容渲染完成（包括客户信息里的异步加载图片、表格、长文本），遍历每个客户详情块的根DOM元素，读取元素相对于文档顶部的offsetTop值，除以单页内容区高度做向上取整，再加上封面、目录模块占用的固定页数，就能得到每个客户内容对应的起始页码。如果客户内容存在跨多页的情况，读取元素底部的偏移位置做同样计算，就能拿到内容的结束页码。
• 最后把计算得到的页码填充到目录组件里，再触发打印/导出PDF操作即可。

方案二：打印布局阶段动态注入（适合固定内核导出场景） #

如果你的导出场景是固定用Chromium内核（比如Electron封装的导出工具、指定用Chrome导出），可以不用提前计算：

• 调用打印前先监听window.matchMedia('print')的状态变化，当浏览器进入打印布局流程时，已经完成了所有内容的分页排版，此时遍历客户详情块，通过元素的布局偏移值直接计算对应页码，动态把生成好的目录DOM插入到目录占位区域，浏览器会自动把目录纳入打印排版。
• 注意这个方案在Safari、旧版Firefox里兼容性一般，不做固定环境适配不建议用。

常见踩坑点 #

• 不要尝试读取CSS counter(page) 的值：这个打印页码计数器只能在打印样式的伪元素中使用，普通JS逻辑没有权限读取，目前所有现代浏览器都做了权限限制，网上流传的读取计数器的方案全部失效。
• 计算前必须确认所有动态内容加载完成：如果客户详情里有异步加载的图片、未渲染完成的长文本，会导致元素高度计算偏差，最终页码错位。
• 不要在打印样式里使用不确定高度的流式布局：比如自动撑开的边距、随内容变化的动态padding，这类不确定高度的样式会直接导致预计算结果失效。

内容的提问来源于stack exchange，提问作者Kieran Quinn