Question

我正在尝试使用HTML中的dompdf将客户端详细信息显示为pdf。还在pdf文件中添加了页眉和页脚。 pdf中的某些内容显示在页脚部分下。

image of pdf generated

这是生成的pdf图像，其他详细信息下的数据显示在footer部分下。如何使用页眉和页脚将内容的对齐方式更改为下一页？

这是已编写的代码，请提供解决方案

<html>

<head>
  <title>Prescription</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      padding: 0;
      margin: 0;
      font-family: "Times New Roman", Times, serif;
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 200px;
      padding: 10px 50px;
      background-color: #ccc;
      border-bottom: 1px solid #1f1f1f;
      z-index: 1000;
    }

    .text-center {
      text-align: center;
    }

    .phone {
      float: right;
      margin-bottom: 10px;
      margin-right: 150px;
    }

    .phone h4 {
      text-align: center;
      right: 50px;
    }

    main {
      margin-top: 200px;
      padding: 10px 50px;
    }

    .after-header {
      height: 30px;
      padding: 10px 0;
    }

    .patient-id {
      float: left;
    }

    .date-day {
      float: right;
    }

    .page-header {
      margin-top: 5px;
      padding: 5px;
      background-color: aqua;
    }

    .page-header h2 {
      font-family: monospace;
      font-size: 20px;
      text-align: center;
    }

    footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50px;
      border-bottom: 1px solid #1f1f1f;
      border-top: 1px solid #1f1f1f;
      z-index: 1000;
    }

    footer h3 {
      padding-left: 50px;
    }

    .details {
      margin-top: 0;
      padding: 2px 0;
    }

    table {
      margin: 5px 0;
      width: 100%;
      border-top: 1px dotted #1f1f1f;
      border-right: 1px dotted #1f1f1f;
    }

    td {
      text-align: justify;
      padding: 10px;
      border-bottom: 1px dotted #1f1f1f;
      border-left: 1px dotted #1f1f1f;
    }

    table tr>td:first-child {
      border-left: none;
    }

    label {
      font-weight: bold;
      font-size: 15px;
    }
  </style>
</head>

<body>
  <header>
    <div class="text-center">
      <h1>SPECIALITY CLINIC</h1>
      <h2>xxxxxxxx</sub>
      </h2>
      <h3>Pediatrition</h3>
    </div>
    <div class="phone">
      <h4>Phone: xxxxx</h4>
    </div>
  </header>
  <footer>
    <h3>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</h3>
  </footer>
  <main>
    <div class="after-header">
      <div class="patient-id">
        <h3>Patient Id: 1001</h3>
      </div>
      <div class="date-day">
        <h3>Date: 17/05/2019</h3>
      </div>
    </div>
    <div class="page-header">
      <h2>Patient Details</h2>
      <hr>
    </div>
    <div class="details">
      <div>
        <div style="background-color: #f2f2f2; padding: 5px;">
          <h3>General Details</h3>
        </div>
      </div>
      <table>
        <col width="10%">
        <col width="20%">
        <col width="10%">
        <col width="10%">
        <col width="30%">
        <tr>
          <td><label>Name:</label></td>
          <td colspan="3"><label>Agreesh V S</label></td>
          <td rowspan="4"><img src="img.jpg"></td>

        </tr>
        <tr>
          <td><label>Age:</label></td>
          <td><label>24</label></td>
          <td><label>Gender: </label></td>
          <td><label>Male</label></td>
        </tr>
        <tr>
          <td><label>Phone: </label></td>
          <td colspan="3"><label>9876543210</label></td>
        </tr>
        <tr>
          <td><label>Email: </label></td>
          <td colspan="3"><label>9876543210</label></td>
        </tr>

      </table>

      <div>
        <div style="background-color: #f2f2f2; padding: 5px;">
          <h3>Personal Details</h3>
        </div>
      </div>

      <table>
        <col width="50%">
        <col width="50%">

        <tr>
          <td><label>Date Of Birth:</label></td>
          <td colspan="3"><label>18/04/1995</label></td>
        </tr>
        <tr>
          <td><label>Weight</label></td>
          <td><label>65 KG</label></td>
        </tr>
        <tr>
          <td><label>Weight at Birth </label></td>
          <td colspan="3"><label>2.5 KG</label></td>
        </tr>
        <tr>
          <td><label>Blood Group </label></td>
          <td colspan="3"><label>B+ve</label></td>
        </tr>

      </table>
      <div>
        <div style="background-color: #f2f2f2; padding: 5px;">
          <h3>Other Details</h3>
        </div>
      </div>
      <table>
        <col width="50%">
        <col width="50%">

        <tr>
          <td><label>Date Of Birth:</label></td>
          <td colspan="3"><label>18/04/1995</label></td>
        </tr>
        <tr>
          <td><label>Weight</label></td>
          <td><label>65 KG</label></td>
        </tr>
        <tr>
          <td><label>Weight at Birth </label></td>
          <td colspan="3"><label>2.5 KG</label></td>
        </tr>
        <tr>
          <td><label>Blood Group </label></td>
          <td colspan="3"><label>B+ve</label></td>
        </tr>

      </table>
    </div>
  </main>
</body>

</html>

Answer 1

请记住，当Dompdf定位内容时，它是基于身体的边界。如果页面上有页眉/页脚，则需要将其推到正文的边界之外，否则它将与文档内容重叠。

对CSS进行一些细微调整即可解决问题。首先，添加页边距以容纳标题。类似于：

@page {
  margin: 220px 1in 1in 1in;
}

然后修改标题的顶部位置以将其推入该空间：

header {
  position: fixed;
  top: -200px;
  left: 0;
  right: 0;
  height: 200px;
  padding: 10px 50px;
  background-color: #ccc;
  border-bottom: 1px solid #1f1f1f;
  z-index: 1000;
}

Dompdf页眉和页脚

1 个答案: