如何不使用PagedJS实现适配Adobe PDF服务API的差异化页眉页脚？

核心思路 #

直接利用CSS Paged Media原生特性，通过@page伪类区分首页与其他页面，结合固定定位或running元素定义各页面专属的页眉页脚，无需依赖PagedJS polyfill，适配Adobe PDF服务API的转换逻辑。

实现代码 #

HTML结构 #

<!-- 首页专属页眉 -->
<div class="header-first">
  <img src="full-logo.png" alt="完整Logo" class="full-logo">
  <!-- 首页页眉其他内容 -->
</div>

<!-- 首页专属页脚 -->
<div class="footer-first">
  <img src="address-logo.png" alt="地址Logo" class="address-logo">
  <!-- 首页页脚其他内容 -->
</div>

<!-- 其他页面专属页眉（作为running元素） -->
<div class="header-other">
  <img src="simplified-logo.png" alt="简化Logo" class="simplified-logo">
  <span class="page-number">页码: <span class="page-count"></span>/<span class="total-pages"></span></span>
  <span class="print-date">打印日期: 2024-05-20</span>
</div>

<!-- 信件主体内容 -->
<div class="letter-content">
  <!-- 你的信件文本、表格等内容 -->
</div>

CSS样式 #

/* 基础页面设置 */
@page {
  size: A4;
  /* 为页眉页脚预留统一边距 */
  margin: 4cm 2cm;
}

/* 首页页面规则：调整边距适配首页页眉页脚 */
@page :first {
  margin-top: 5cm;
  margin-bottom: 3.5cm;
}

/* 其他页面页面规则：调用running页眉，不定义页脚 */
@page :not(:first) {
  @top-center {
    content: element(header-other);
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
  }
}

/* 首页页眉：固定定位到首页顶部预留区域 */
.header-first {
  position: fixed;
  top: 1cm;
  left: 2cm;
  right: 2cm;
  border-bottom: 1px solid #000;
  padding-bottom: 10px;
}

/* 首页页脚：固定定位到首页底部预留区域 */
.footer-first {
  position: fixed;
  bottom: 1cm;
  left: 2cm;
  right: 2cm;
  text-align: center;
}

/* 其他页面页眉：定义为running元素，供@page调用 */
.header-other {
  position: running(header-other);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 控制元素显示逻辑：其他页面隐藏首页的页眉页脚 */
@page :not(:first) {
  .header-first, .footer-first {
    display: none;
  }
}

/* 页码与日期样式 */
.page-number, .print-date {
  font-size: 12px;
  color: #666;
}

/* 主体内容避免被页眉页脚遮挡 */
.letter-content {
  margin-top: 0;
}

关键说明 #

• 利用@page :first和@page :not(:first)精准区分页面类型，分别定义边距与页眉页脚规则
• 首页的页眉页脚采用固定定位直接放入预留的页面边距区域，确保不干扰主体内容
• 其他页面的页眉使用running元素，通过@top-center嵌入页面顶部，符合CSS Paged Media标准规范
• 无需依赖PagedJS，完全基于原生CSS特性，适配Adobe PDF服务API的转换流程

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