打印頁在第二頁上沒有正確打斷

Question

我正在嘗試在表格打印預覽中嘗試一種布局，因為我注意到即使在使用page-break-after: always;它在第二頁中也無法正常page-break-after: always; 看到我的代碼，然后看下面的輸出屏幕

CSS聲明

    div.page
          {
            page-break-after: always;
            page-break-inside: avoid;
          }
.footer{
       position:fixed;
       bottom:-10px;
       height:32px;
    }

頁腳

<hr class="footer" style="width:100%;height:5px;bottom:20px;background-color:black !important;">
<div class="footer"><img width="120px" height="20px" src="/logo.png"></div>
<div class="footer" style="right:20px"></div>
<div style="left:330px" class="footer" id="dateTime"></div>

桌子

 <div class="page"><!--page css here-->
    <h2 id="heading">CHEMICAL TEST</h2>
    <p id="heading">{{ $report }}</p>
    <p id="heading">Report No.: RN001</p>
    <hr>
    <center>
    <p id="heading">{{ $report }}</p>
    <th>Username</th>
    <th>Name</th>
    <th>Data Calculation</th>
    <th>Status</th>
    <th>Date</th>

    @foreach($reportData as $data)
    <tr>
      <td>{{$data['user_name']}} <br> {{$data['role_name']}}</td>
      <td>{{$data['ai_name']}}</td>
      <td>{{$data['ai_method']}}</td>
      @if($data['method_status'] == 0)
      <td>Inactive</td>
      @else
      <td>Active</td>
      @endif
      <td>{{date('m-d-Y', strtotime($data['date_axis']))}} <br> {{date('h:i A', strtotime($data['date_axis']))}} </td>
    </tr>
  @endforeach
    </table>
  <p id="totalresult_dtab">Total : {{$reportQuery}}</p>
    </div>
  </center>
</div>

第一頁正確中斷，但此后未中斷。

請參閱輸出的第一頁。

第二頁未正確斷開

你能幫我如何正確地打破它嗎？

Answer 1

使用媒體打印。 在@media打印中編寫CSS。

@media print {
       div.page
              {
                page-break-after: always;
                page-break-inside: avoid;
              }
    .footer{
           position:fixed;
           bottom:-10px;
           height:32px;
        }
    }