Chromium打印PDF时，如何为固定定位伪页脚添加页码？

首先明确：你自己定义的counter-reset + counter-increment方案在Chromium的PDF渲染中不可行，原因很直接：
你的.page-footer是单个position: fixed元素，在PDF渲染时会被重复渲染到每一页，但CSS计数器是基于文档流中的元素实例工作的——只有第一个实例会触发计数器递增，后续重复的fixed元素不会重新触发计数逻辑，所以每页都会显示Page 1。

可行的解决思路 #

思路1：利用Chromium内置的分页计数器（推荐） #

Chromium的PDF渲染引擎原生支持两个专门的分页计数器：counter(page)（当前页码）和counter(pages)（总页数），完全不需要手动重置或递增。你可以直接修改CSS来使用它们，同时保留你的fixed伪页脚结构：

修改后的CSS样式：

.report {
  /* 移除原来的counter-reset和相关自定义计数器规则 */
}

.page-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  border-bottom: solid 1px;
  /* 可以添加文字对齐、字体等样式 */
  text-align: center;
  padding: 8px 0;
}

.page-footer:before {
  content: "Page: " counter(page);
  /* 如果需要显示总页数，改成：
  content: "Page: " counter(page) " of " counter(pages);
  */
}

这个方案的核心是：Chromium在渲染PDF分页时，会自动为每页更新counter(page)的值，fixed元素的:before伪元素会自动获取当前页的页码，不需要额外的JavaScript或复杂的计数器逻辑。

思路2：动态插入分页标记（适合固定结构内容） #

如果因为某些限制无法使用内置计数器，你可以在Handlebars编译HTML时，根据内容结构预估分页位置，插入隐藏的分页触发元素，让计数器基于这些元素递增：

1. 在Handlebars模板中，需要分页的位置插入标记：

<div class="page-break-marker"></div>

2. 对应的CSS修改：

.report {
  counter-reset: pageIndex 0;
}

.page-break-marker {
  counter-increment: pageIndex;
  display: none; /* 隐藏标记元素 */
  page-break-after: always; /* 强制在此处分页 */
}

.page-footer:before {
  content: "Page: " counter(pageIndex);
}

.page-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  border-bottom: solid 1px;
}

这种方式需要你提前明确内容的分页规则（比如每N条数据、每段长文本后插入标记），适合内容结构固定的场景。

思路3：Puppeteer动态注入样式（灵活适配场景） #

如果以上CSS方案都不适用，你可以用Puppeteer的页面评估功能，在生成PDF前动态注入使用内置计数器的样式：

// 在调用page.pdf()之前执行这段代码
await page.evaluate(() => {
  const style = document.createElement('style');
  style.textContent = `
    .page-footer:before {
      content: "Page: " counter(page);
    }
  `;
  document.head.appendChild(style);
});

// 生成PDF时记得给页脚留足够的边距
await page.pdf({
  path: 'output.pdf',
  format: 'A4',
  margin: { bottom: '50px' }
});

这个方案本质还是利用Chromium的内置计数器，只是通过JavaScript动态调整样式，适合无法提前修改CSS的场景。

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