如何在HTML生成的银行合同PDF页眉添加页码？现有CSS代码无效

你的@page规则没生效，大概率是这几个原因，对应修正方案如下：

1. 缺少打印媒体类型声明 #

多数PDF转换工具只解析@media print内的打印样式，需要把@page规则包裹进去。

2. CSS语法错误 #

原代码里margin:2cm写在了@bottom-center的嵌套规则后面，属于位置错误，要移到@page的顶级规则下。

3. 换行符与空白处理优化 #

部分渲染引擎对white-space: pre的支持有限，换成pre-wrap兼容性更好。

修正后的完整代码：

@media print {
  @page {
    margin: 2cm;
    @bottom-right {
      /* 可选：加上总页数，显示格式更清晰 */
      content: "Page " counter(page) " of " counter(pages);
    }
    @bottom-center {
      white-space: pre-wrap;
      content: 'Read and Accepted \A Signed';
    }
  }

  /* 消除body默认边距，避免和@page的margin冲突 */
  body {
    margin: 0;
    padding: 0;
  }
}

额外排查点 #

• 确认PDF转换工具支持CSS Paged Media：Chrome打印、WeasyPrint、PrinceXML对@page支持较好，旧版wkhtmltopdf可能存在兼容性问题，建议换用新版本或其他工具测试。
• 确保HTML内容足够生成多页：单页文档的页码可能不明显，添加足够文本触发分页后再测试。
• 检查是否有其他CSS规则覆盖打印样式：比如全局的margin、padding可能干扰@page的边距设置。

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