动态HTML PDF页码计数器问题：所有页面均显示Page 1 of 1

你的CSS计数器逻辑存在错误，导致无法正确统计当前页码和总页数，以下是正确的实现方案：

核心问题分析 #

1. 你在.page-number:before中递增pages计数器，每个页面的该伪元素都会重新初始化并递增这个计数器，所以总页数始终显示1。
2. page计数器在:after伪元素中递增，伪元素的计数器作用域限制导致当前页码无法正确累加。

方案一：利用PDF生成工具的内置总页数计数器 #

多数PDF生成工具（如wkhtmltopdf、Chrome打印功能）支持内置的pages计数器来获取总页数，只需正确初始化并递增当前页码：

/* 初始化当前页码计数器 */
body {
  counter-reset: page;
}

/* 在每个页码元素处递增当前页码 */
.page-number {
  counter-increment: page;
}

/* 渲染页码文本 */
.page-number:after {
  content: "Page " counter(page) " of " counter(pages);
}

/* 用于强制分页的类，放在每个页面内容的末尾 */
.page-break {
  page-break-after: always;
}

HTML结构示例：

<!-- 第一页内容 -->
<div>页面1内容</div>
<div class="page-number"></div>
<div class="page-break"></div>

<!-- 第二页内容 -->
<div>页面2内容</div>
<div class="page-number"></div>

方案二：手动指定总页数（动态生成时已知页面数） #

如果提前知道总页数，可以通过CSS变量传递给样式：

<!-- 在body上设置总页数变量 -->
<body style="--total-pages: 3;">
  <!-- 第一页 -->
  <div>页面1内容</div>
  <div class="page-number"></div>
  <div class="page-break"></div>

  <!-- 第二页 -->
  <div>页面2内容</div>
  <div class="page-number"></div>
  <div class="page-break"></div>

  <!-- 第三页 -->
  <div>页面3内容</div>
  <div class="page-number"></div>
</body>

body {
  counter-reset: page;
}

.page-number {
  counter-increment: page;
}

.page-number:after {
  content: "Page " counter(page) " of " var(--total-pages);
}

.page-break {
  page-break-after: always;
}

内容的提问来源于stack exchange，提问作者K is Coding