如何在HTML/CSS PDF生成器中获取章节页码并生成动态目录？

核心原理 #

利用CSS分页媒体（Paged Media）的target-counter属性，它能获取锚点目标元素所在的页码，配合伪元素将页码插入到目录项中。同时通过CSS分页规则确保章节内容的分页逻辑稳定，让页码计算准确。

具体实现步骤 #

1. 构建HTML结构 #

给每个章节添加唯一ID作为锚点，目录项使用<a>标签指向对应章节：

<!-- 目录 -->
<div class="table-of-contents">
  <h2>目录</h2>
  <ul>
    <li><a href="#chapter-1">第一章：基础介绍</a></li>
    <li><a href="#chapter-2">第二章：核心功能</a></li>
    <li><a href="#chapter-3">第三章：进阶技巧</a></li>
  </ul>
</div>

<!-- 章节内容 -->
<h1 id="chapter-1">第一章：基础介绍</h1>
<p>这里是章节内容，篇幅足够长时会自动分页...</p>

<h1 id="chapter-2">第二章：核心功能</h1>
<p>章节内容...</p>

<h1 id="chapter-3">第三章：进阶技巧</h1>
<p>章节内容...</p>

2. 编写CSS样式 #

使用@page规则定义页脚页码，再用target-counter给目录项添加动态页码：

/* 定义全局分页规则 */
@page {
  size: A4;
  margin: 2cm;
  
  /* 页脚页码 */
  @bottom-center {
    content: "第 " counter(page) " 页，共 " counter(pages) " 页";
  }
}

/* 目录项样式：添加页码到右侧 */
.table-of-contents li a::after {
  content: target-counter(attr(href), page);
  float: right;
}

/* 强制章节在新页开始，确保页码计算准确 */
h1 {
  break-before: page;
  margin-top: 0;
}

局限性 #

• 仅支持对CSS分页媒体特性有良好支持的PDF生成工具：Chrome/Edge的打印PDF功能、最新版wkhtmltopdf、Prince等工具能正常解析target-counter；旧版工具或部分在线PDF转换服务可能不支持，导致页码无法显示。
• 前端实时预览无法看到动态页码：浏览器的普通渲染模式不识别分页媒体属性，只有进入打印预览或生成PDF时，才会计算并显示正确的页码。

仅靠HTML/CSS无法在前端实时获取章节对应的页码数值（比如用于JS逻辑），因为页码是PDF生成引擎在处理分页时计算的，属于打印/渲染阶段的产物，不会暴露给HTML DOM。

如果需要在生成PDF前预估页码，只能通过JS模拟分页逻辑（比如计算内容高度、页面高度来推算），但这种方法误差极大——不同PDF工具的字体渲染、换行规则、边距处理都可能不同，推算结果和实际PDF页码大概率不一致。

如果是生成PDF后需要提取页码，就得借助PDF处理库（前端如pdfjs，后端如PyPDF2、iText），但这已经超出了纯HTML/CSS的范畴。

内容的提问来源于stack exchange，提问作者ero senin