Верхний и нижний колонтитулы Dompdf - PullRequest
Новая
       18

Верхний и нижний колонтитулы Dompdf

0 голосов
/ 17 мая 2019

Я пытаюсь отобразить детали клиента в формате PDF, используя dompdf из HTML. Также добавлены верхний и нижний колонтитулы в формате 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>

1 Ответ

0 голосов
/ 02 июня 2019

Имейте в виду, что когда 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;
}
...