React浏览器打印PDF：仅指定页面显示页眉页脚

问题背景 #

在React项目中使用浏览器打印功能生成PDF，现有组件结构如下：

const coverPage = `<div  class="coverPage"></div>`;
const instructionPage = `<div  class="instructions sun-editor-editable"></div>`;
const mainContent= `<div  class="main-content"></div>`;
const pageBreak = `<div class="pageBreakBefore" ></div>`;
const backPage = `<div  class="backPage"></div> `;

mainContent可跨多页显示，内部包含.header和.footer类。通过wrapper HTML组合内容，结构如下：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <style>
    .page-header, .page-header-space,
    .page-footer, .page-footer-space {
      height: 60px;
      background-color:white;
    }
    .page-header {
      position: fixed;
      top: 0;
      width:100%;
    }
    .page-footer {
      position: fixed;
      bottom: 0;
      width:100%;
    }
    #contentss  {
       position: relative;
       z-index: 1000;
    }
    @media print{
      .pageBreakBefore{
        page-break-before:always;
      }
  .header {
  position: sticky;
  top: 0;
  background-color: #ffffff; /* 可根据需求调整背景色 */
  padding: 10px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); 
  }

   .footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff; /* 可根据需求调整背景色 */
  padding: 10px;
  box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);
  }
      
    }
    
    </style>
  </head>
  <body>[[Body Contents]]</body>
</html>

同时使用表格结构固定页眉页脚，将组合后的HTML插入tbody：

export const ResultHTML = `
  <div class="page-header" style="text-align: center"></div>

  <div class="page-footer"></div>

  <table>
    <thead>
      <tr>
        <td>
          <!-- 固定页眉占位 -->
          <div class="page-header-space"></div>
        </td>
      </tr>
    </thead>
    

    <tbody>
      <tr>
        <td id="contentss"></td>
      </tr>
      
    </tbody>

    <tfoot>
      <tr>
        <td>
          <!-- 固定页脚占位 -->
          <div class="page-footer-space"></div>
        </td>
      </tr>
    </tfoot>
  </table>
`;

当前设置会让所有页面显示页眉页脚，但需要封面页（coverPage）和封底页（backPage）隐藏页眉页脚，其他页面正常显示。试过html2pdf、jspdf、pdfmake等库，存在图片渲染或布局断裂问题，仅浏览器打印效果符合预期。

解决方案 #

核心思路是通过CSS打印媒体查询结合类选择器，精准控制页眉页脚的显示状态，同时调整页面边距避免布局错乱。

1. 标记特殊页面的容器 #

组合内容时，给封面和封底包裹专属类名的容器，方便CSS定位：

// 组合内容示例
const combinedContent = `
  <div class="no-header-footer">${coverPage}</div>
  ${pageBreak}
  ${instructionPage}
  ${pageBreak}
  ${mainContent}
  ${pageBreak}
  <div class="no-header-footer">${backPage}</div>
`;

2. 更新CSS打印规则 #

在wrapper的<style>中修改@media print区块，添加以下规则：

@media print{
  .pageBreakBefore{
    page-break-before:always;
  }

  /* 默认显示页眉页脚及占位 */
  .page-header, .page-footer,
  table thead .page-header-space,
  table tfoot .page-footer-space {
    display: block;
  }

  /* 隐藏特殊页面的页眉页脚及占位 */
  .no-header-footer ~ .page-header,
  .no-header-footer ~ .page-footer,
  .no-header-footer ~ table thead,
  .no-header-footer ~ table tfoot {
    display: none;
  }

  /* 重置特殊页面的边距，避免空白偏移 */
  .no-header-footer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .header {
    position: sticky;
    top: 0;
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); 
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2);
  }
}

原理说明 #

• 利用CSS兄弟选择器~，当页面内容以.no-header-footer容器开头时，匹配并隐藏后续的页眉、页脚及表格占位元素。
• 重置.no-header-footer的边距，避免因页眉页脚的占位高度导致页面内容偏移。
• 完全基于浏览器原生打印的CSS规则，无需依赖第三方库，保留原有布局效果。

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