使用HTML生成的pdf第二页上的重叠标题

html5 • • 问答 • 261 阅读

目标：为动态生成的 pdf 提供高达 8 厘米的边距，该pdf 在每一页上都有重复的页眉和页脚。

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

第 2 页及以后 - 问题

它应该是什么样子

我的尝试：
尝试像相关问题的解决方案： -
与PDF的第二页页眉内容重叠和表头重叠的第二页上打印时/ PDF等之辈，但他们都不是工作。

代码：-

<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>
      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>
      Footer
    </div>
    <table>
      <thead>
        <tr>
          <td>
            <!--place holder for the fixed-position header-->
            <div></div>
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div>
                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></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>
以上是使用HTML生成的pdf第二页上的重叠标题的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容