Chrome下打印页脚页码问题：counter(pages)失效及@pages不生效求助

我之前也踩过Chrome打印页码显示of 0的坑，结合实战经验给你几个可行的解决方向：

1. 优先用@page内置页脚区域定义页码 #

Chrome对直接在@page规则里设置页脚页码的支持，比自定义类的:after要可靠得多——自定义元素很可能没被纳入打印上下文的计数器计算逻辑。试试这个写法：

@page {
  size: A4; /* 匹配你的打印纸张尺寸 */
  margin: 2cm; /* 给页脚留出足够空间 */

  /* 把页码放在右下角，也可以用@bottom-left/@bottom-center调整位置 */
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font-size: 12px;
  }
}

直接用@bottom-right这类打印区域伪元素，Chrome能正确识别总页数，基本不会再出现of 0的情况。

2. 确保内容能触发分页 #

如果你的内容只有一页，counter(pages)应该显示1，但如果显示0，大概率是内容没被Chrome识别为可分页的结构。可以手动添加分页测试：

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

在HTML里插入几个带这个类的元素：

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

刷新后打开打印预览，看看总页数是否正常显示，先排除内容过少导致的计数器异常。

3. 修复自定义页脚类的写法（如果坚持用自定义元素） #

要是你必须用自己的.custom-footer-page-number类，得确保它处于打印上下文，并且固定在每页的页脚：

@page {
  margin-bottom: 3cm; /* 给固定页脚预留空间，避免被内容覆盖 */
}

.custom-footer-page-number {
  position: fixed;
  bottom: 1cm;
  right: 2cm;
  z-index: 999; /* 避免被其他元素遮挡 */
}

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

另外，Chrome有时候会在DOM没完全渲染好就计算页数，导致counter(pages)为0，可以加个小延迟：

window.onbeforeprint = function() {
  // 给Chrome一点时间完成分页计算
  setTimeout(() => {
    window.print();
  }, 100);
};

调用打印前等100ms，让浏览器有足够时间识别总页数。

4. 检查Chrome打印设置 #

最后确认下打印预览里的设置：

• 不要勾选「简化页面」（这个会禁用部分CSS规则）
• 确保纸张尺寸和@page里设置的一致
• 开启「背景图形」（虽然不影响计数器，但能避免页脚样式失效）

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