使用CSS @page规则添加PDF打印页码不生效如何解决？

你当前写的@page规则不生效，绝大多数是页边距预留不足、浏览器配置不对导致的，可按以下优先级排查调整：

• 先补充@page的基础配置，预留出页码显示的底部空间，同时可以扩展为总页数+当前页的格式：

@page {
  size: A4;
  /* 底部边距需要预留足够空间，建议至少15mm */
  margin: 20mm 15mm 20mm 15mm;
  @bottom-center {
    content: counter(page) " / " counter(pages);
    font-size: 9pt;
    color: #666;
  }
}

配置完成后在浏览器打印预览界面，找到「更多设置」，取消勾选「页眉和页脚」，避免浏览器自带的页眉页脚和自定义页码重叠。

• 如果webkit内核浏览器（Chrome、Edge）下上述配置仍然不生效，可以用固定定位元素模拟页码，兼容性更好：
  1. 在HTML结构末尾添加页码容器：<div class="print-footer"></div>
  2. 添加打印专属CSS：

  @media print {
    body {
      /* 给内容底部预留空间，避免被页码遮挡 */
      padding-bottom: 15mm;
    }
    .print-footer {
      position: fixed;
      bottom: 5mm;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 9pt;
    }
    /* 手动分页时使用该类名 */
    .page-break {
      page-break-after: always;
    }
  }
  

• 额外注意事项：
  • 不要给html、body节点设置overflow: hidden、height: 100%这类限制高度的属性，会导致分页逻辑异常，页码计算错误
  • 动态内容需要等所有资源、内容完全渲染完成后再触发window.print()，避免页码计算偏差
  • 如果需要复杂的多栏、跨页元素排版需求，可以使用专门的前端打印排版库实现，一致性更高

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