在使用 HTML 生成的 pdf 第二页上重叠 header

Question

目标： 为动态生成的 pdf 留出最多 8 厘米的边距，它在每一页上重复 header 和页脚。

当前问题： 虽然我能够为 pdf 留出边距并且内容在第一页上正确对齐，但是从第二页开始 body开始与页面的header重叠，

第 2 页及以后 - 问题

它应该是什么样子

我试过的： 尝试了相关问题的解决方案，例如：- Content overlapping with header on second page of PDF and Table headers overlapping on second page when printing/PDF 和其他人也一样，但其中 none 似乎在工作。

代码:-

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
      crossorigin="anonymous"
    />
    <title>Document</title>
    <style>
      /* Styles go here */
      @media print {
        * {
          -webkit-print-color-adjust: exact !important;
        }
      }
      * {
        font-family: "Mulish", sans-serif;
      }
      .section-padding {
        padding-bottom: 20px;
      }
      .table > :not(:last-child) > :last-child > * {
        border-bottom-color: inherit;
      }
      strong {
        font-weight: 700 !important;
      }
      .page-header,
      .page-header-space {
        height: 250px;
      }
      .page-footer,
      .page-footer-space {
        height: 100px;
      }
      .page-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
      }
      .page-header {
        position: fixed;
        top: 0mm;
        width: 100%;
      }
      .page {
        page-break-after: always;
      }
      @page {
        margin: 5cm;
      }
      @media print {
        thead {
          display: table-header-group;
        }
        tfoot {
          display: table-footer-group;
        }
        body {
          margin: 0;
        }
        table {
          page-break-inside: auto;
        }
        tr,
        div {
          page-break-inside: avoid;
          page-break-after: auto;
        }
      }

    </style>
  </head>
  <body>
    <div class="page-header">
      Header</br>
      Header</br>
      Header</br>
      Header</br>
      Header</br>
      Header</br>
      Header</br>
      Header</br>
      Header</br>
      Header</br>
      Header</br>
      Header</br>
      Header</br>
    </div>
    <div class="page-footer">
      Footer
    </div>
    <table style="padding: 0; margin: 0; width: 100%;">
      <thead>
        <tr>
          <td>
            <!--place holder for the fixed-position header-->
            <div class="page-header-space"></div>
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="page" style="color: green; font-weight: bold;">
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
                Main content</br>
            </div>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>
            <!--place holder for the fixed-position footer-->
            <div class="page-footer-space"></div>
          </td>
        </tr>
      </tfoot>
    </table>
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
      integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
      integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

PS：问题只有在边距超过1.5cm时才会重现，如果有任何其他第三方工具或任何其他方式可以实现目标，请随时分享。

谢谢！

Answer 1

主要问题似乎是您将“主要内容”放在了一行中。
我设法让它工作类似于 this.

我还分别将页眉和页脚占位符移到了 thead 和 tfoot。
此外，“@page{margin: 5cm;}”似乎打破了它，老实说我不知道为什么。
我不得不对代码进行相当多的修改，但我希望它可以帮助您作为您想要实现的目标的模板。

这是我最终得到的代码：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
    href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;700&display=swap"
    rel="stylesheet"
    />
    <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
    crossorigin="anonymous"
    />
    <title>Document</title>
    <style>
      /* Styles go here */
      @media print {
        * {
        -webkit-print-color-adjust: exact !important;
        }
      }
      * {
        font-family: "Mulish", sans-serif;
      }
      .section-padding {
        padding-bottom: 20px;
      }
      .table > :not(:last-child) > :last-child > * {
        border-bottom-color: inherit;
      }
      strong {
        font-weight: 700 !important;
      }
      .page-header,
      .page-header-space {
        height: 250px;
      }
      .page-footer,
      .page-footer-space {
        height: 100px;
      }
      .page-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
      }
      .page-header {
        position: fixed;
        top: 0mm;
        width: 100%;
      }
      .page {
        page-break-after: always;
      }
      /* @page {
        margin: 5cm;
      } */
      @media print {
        body {
        margin: 0;
        }
        table {
          page-break-inside: auto;
        }
        tr {
          page-break-inside: avoid;
          page-break-after: auto;
        }
        thead {
          display: table-header-group;
        }
        tfoot {
          display: table-footer-group;
        }   
      }
    </style>
    </head>
  <body>
    <table style="padding: 0; margin: 0; width: 100%;">
      <thead>
        <tr><td>Header</td></tr>
        <tr><td>Header</td></tr>
        <tr><td>Header</td></tr>
        <tr><td>Header</td></tr>
        <tr><td>Header</td></tr>
        <tr><td>Header</td></tr>
        <tr><td>Header</td></tr>
        <tr><td>Header</td></tr>
        <tr><td>Header</td></tr>
        <tr><td>Header</td></tr>
      </thead>
      <tbody class="page" style="color: green; font-weight: bold;">
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
        <tr><td>Main content</td></tr>
      </tbody>
      <tfoot>
        <tr><td>Footer</td></tr>
      </tfoot>
    </table>

    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
      integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
      integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
      crossorigin="anonymous"
    ></script>
    </body>
</html>

Answer 2

找了很多资料后，最后我得出结论，随着页边距的增加，可以给页面的最大值 header 即 <thead> 减少。

例如，

0cm 页边距 - 最大 header 高度可以是 250px
1 厘米页边距 - 最大 header 高度可以是 230px

等等。

.page-header,
.page-header-space {
  height: 250px;
}

要补充一点，给出的值不是严格的值，会根据您的用例而变化，但是通过根据边距值改变 header 大小，可以实现问题中给出的目标.

在使用 HTML 生成的 pdf 第二页上重叠 header

Overlapping header on second page of pdf generated using HTML

html

css

pdf

bootstrap-4