React多页HTML报表打印：不同页眉页脚实现方案咨询

我用React组件构建了一个「主报表」，里面包含多个子报表，每个子报表需要有不同的页眉和页脚，请问能否实现？最优方案是什么？

我试过给页眉和页脚设置position:fixed，单页报表显示正常，但多页时页面内容会和当前页脚、下一页页眉重叠；页脚更是混乱，所有页的页脚都会出现在每一页上。

我找到过一篇文章，但它只适用于页眉页脚完全相同的多页文档。

更新：我尝试用@page margin规则，但它设置的是「硬边距」，负边距、内边距或绝对定位无法作用到内容框之外。

现有尝试代码 #

CSS代码

.report-page-wrapper {
  margin-left: 0.55in;
  break-after: page;
  display: flex;
  flex-direction: column;
  width: 100% !important;
  height: 100% !important;
  h3 {
    background-color: #e1efc3;
    color: #003250;
    padding: 0.45in 0.2in;
    font-weight: 600;
    margin-top: 0;
    width: 85%;
    position: fixed;
  }
  h4 {
    color: #003250;
  }
  .row {
    margin: 1.8in 20px 20px 20px;
  }
  ul {
    margin-top: 0.5in;
    margin-right: 0.5in;
  }
  footer {
    position: fixed;
    margin-bottom: 0;
    width: 100%;
    print-footer-counter::after {
      counter-increment: row;
      content: "Page " counter(row) ": ";
    }
  }
}

HTML结构

<div class="report-page-wrapper">
  <h3>Report 1 Header</h3>
  <div class="row">
    <div class="col-md-4">
      <h4>Inner Header 1</h4>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
    <div class="col-md-4">
      <h4>Inner Header 2</h4>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
  </div>
  <footer>
    <ul>
      <li>Footer 1</li></ul>
  </footer>
</div>

<div class="report-page-wrapper">
  <h3>Report 2</h3>
  <div class="row">
    <div class="col-md-6">
      <h4>Inner Header 2</h4>
      <li>Some stuff</li>
    </div>
    <div class="col-md-6">
      <h4>Inner Header 2a</h4>
      <li><b>1</b>&nbsp;q</li>
      <li><b>2:</b>&nbsp;w</li>
      <li><b>3:</b>&nbsp;e"</li>
    </div>
  </div>
  <footer>
    <ul>
      <li>Footer 2</li></ul>
  </footer>
</div>

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