2023年如何通过简易CSS在HTML页面打印页码？已试两种代码无效

先说说你之前代码的常见问题 #

• 第一种table方案：需要HTML结构严格对应，且部分浏览器对table-footer-group的打印支持存在兼容性问题，若内容未触发自动分页，页脚不会重复显示。
• 第二种@page方案：这是CSS分页媒体的标准写法，但多数浏览器要求必须给@page设置足够的边距，否则页脚会被页面内容覆盖，或者浏览器默认的页眉页脚会遮挡自定义页码。

有效解决方案（兼容主流浏览器） #

以下是经过验证的完整实现，包含HTML结构和CSS：

HTML结构

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 打印样式 */
    @media print {
      /* 重置默认样式，避免干扰 */
      body {
        margin: 0;
        padding: 0;
      }

      /* 定义页面边距，给页脚留出空间 */
      @page {
        size: A4;
        margin: 2cm; /* 上下左右边距，确保页脚不会被内容覆盖 */
      }

      /* 设置页脚页码位置 */
      @page {
        @bottom-center {
          content: "第 " counter(page) " 页，共 " counter(pages) " 页";
          font-size: 12px;
          color: #666;
        }
      }

      /* 可选：强制分页测试，确保多页时显示页码 */
      .page-break {
        page-break-after: always;
      }

      /* 隐藏不需要打印的元素 */
      .no-print {
        display: none;
      }
    }
  </style>
</head>
<body>
  <div class="content">
    <p>第一页内容...</p>
    <!-- 强制分页 -->
    <div class="page-break"></div>
    <p>第二页内容...</p>
    <div class="page-break"></div>
    <p>第三页内容...</p>
  </div>
</body>
</html>

关键注意事项

1. 必须设置@page的margin：如果边距过小，自定义页码会被页面内容或者浏览器默认的页眉页脚遮挡，建议设置至少1-2cm的边距。
2. 浏览器打印设置调整：
   • Chrome/Firefox：打印预览时，找到“更多设置”，取消勾选“页眉和页脚”，避免浏览器默认的页码覆盖自定义样式。
   • Edge：类似Chrome，在打印设置中关闭“页眉和页脚”选项。
3. 测试分页：如果内容只有一页，页码可能不明显，添加page-break-after: always强制分页，验证多页场景下的显示效果。
4. 避免冲突样式：确保页面中没有其他CSS（如display: flex/grid）影响分页媒体的渲染，部分布局方式会干扰@page的生效。

关于第一种table方案的修复（可选） #

如果你坚持使用table布局方案，需要确保HTML结构正确，且内容足够触发分页：

<div id="content" style="display: table; width: 100%;">
  <!-- 页面内容 -->
  <div style="display: table-row-group;">
    <p>第一页内容...</p>
    <div class="page-break"></div>
    <p>第二页内容...</p>
  </div>
  <!-- 页脚 -->
  <div id="pageFooter" style="display: table-footer-group;">
    <div style="text-align: center; padding: 10px;">
      <span id="pageNum"></span>
    </div>
  </div>
</div>

对应的CSS：

@media print {
  #pageFooter:after {
    counter-increment: page;
    content: "第 " counter(page) " 页";
  }
  /* 初始化计数器 */
  body {
    counter-reset: page 0;
  }
}

不过这种方案的兼容性不如@page方案，优先推荐标准的@page写法。

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