如何仅用CSS实现打印PDF时首页添加额外页脚内容？

要实现首页页脚额外添加区域的需求，完全可以通过CSS Paged Media的扩展属性完成，不需要额外工具，只需在现有代码基础上调整样式规则即可。以下是具体实现方案：

核心思路 #

利用CSS的@page:first伪类区分首页，结合position: running()定义两个独立的页脚元素：一个是所有页面共用的公共页脚，另一个是仅首页显示的额外区域。然后分别配置默认页面和首页的页脚内容。

完整代码实现 #

<head>
  <style>
    /* 定义公共页脚的running元素 */
    .footer-common {
      position: running(footer-common);
      font-size: 12px;
      color: #333;
    }

    /* 定义首页专属的额外页脚区域 */
    .footer-home-extra {
      position: running(footer-home-extra);
      margin-top: 8px;
      font-size: 10px;
      color: #666;
    }

    /* 默认页面的页脚配置：只显示公共页脚 */
    @page {
      margin-bottom: 40%;
      margin-top: 5%;
      @bottom-left {
        content: element(footer-common);
      }
    }

    /* 首页的页脚配置：同时显示公共页脚 + 额外区域 */
    @page:first {
      @bottom-left {
        content: element(footer-common) "\A" element(footer-home-extra);
        white-space: pre; /* 确保换行符生效 */
      }
    }
  </style>
</head>
<body>
  <!-- 公共页脚内容，Thymeleaf动态填充数据 -->
  <div class="footer-common">
    公司名称：[[${companyName}]] | 联系电话：[[${phone}]]
  </div>

  <!-- 首页专属额外区域，仅首页显示 -->
  <div class="footer-home-extra">
    本报告生成于：[[${#dates.format(generateTime, 'yyyy-MM-dd HH:mm')}]]
  </div>

  <!-- 页面主体内容 -->
  <div class="content">
    <!-- Thymeleaf渲染的主体内容 -->
    ...
  </div>
</body>

关键说明 #

• @page:first：专门针对PDF第一页应用样式规则，这是CSS Paged Media的标准属性，主流PDF渲染工具（如WeasyPrint、Prince、新版本wkhtmltopdf）都支持。
• position: running()：将元素标记为可在页脚/页眉区域复用的内容，配合content: element()在@page的区域中调用。
• 换行处理：用"\A"加white-space: pre实现两个页脚元素的换行，部分工具也支持通过伪元素实现块级换行：

  @page:first @bottom-left {
    content: element(footer-common);
    display: block;
  }
  @page:first @bottom-left::after {
    content: element(footer-home-extra);
    display: block;
    margin-top: 8px;
  }
  

• Thymeleaf仅负责动态渲染HTML内容（比如填充页脚的动态数据），核心页脚控制逻辑由CSS完成，两者互不冲突。

注意事项 #

不同PDF生成工具对CSS Paged Media的支持程度略有差异，若遇到样式不生效的情况，可优先检查工具的CSS特性支持文档。

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