如何在打印页黄色Footer内添加Page x of y并修复0/0计数问题

问题根源 #

你遇到的“Page 0 / 0”错误，本质是两个核心问题：

1. 未正确初始化和递增页码计数器，导致当前页计数从0开始；
2. pages总页数计数器需要浏览器完成文档分页计算后才会生效，若页脚定位逻辑错误，浏览器无法正确识别分页，就会返回0。

修复方案 #

结合CSS Paged Media规则和固定定位，把页码嵌入黄色页脚，同时保证计数准确：

1. 初始化分页计数器
   通过@page规则设置分页参数，同时初始化并递增当前页计数器，第一页单独重置计数器避免起始值错误：

@page {
  size: A4;
  margin: 2cm; /* 预留足够底部边距放置页脚，避免覆盖正文 */
  counter-increment: page; /* 每页自动递增当前页计数器 */
}

@page :first {
  counter-reset: page 1; /* 第一页重置计数器为1，确保起始页码正确 */
}

2. 固定页脚并插入页码
   在打印媒体查询中，将黄色页脚固定到每页底部，通过伪元素调用计数器生成“Page x of y”格式：

@media print {
  /* 按需隐藏不需要打印的元素 */
  .no-print {
    display: none;
  }

  .page-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.5cm; /* 与@page的底部边距匹配，避免内容重叠 */
    background-color: yellow;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1cm;
  }

  .page-footer::after {
    content: "Page " counter(page) " of " counter(pages);
    font-size: 14px;
  }
}

关键注意事项 #

• 确保文档内容足够多（或手动添加分页符page-break-after: always;）触发分页，否则pages计数器会显示0；
• 部分旧浏览器对counter(pages)支持有限，建议用Chrome、Firefox等现代浏览器测试；
• 页脚的height必须小于@page设置的底部边距，防止覆盖正文内容。

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