印刷ページが第2ページで正しく分割されない

Question

テーブル印刷プレビューでレイアウトを試していますが、使用していても2番目のページで正しく破らない場合は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> 

最初のページは正しく壊れていますが、それ以降は正しく表示されません。

出力の最初のページを参照してください。

あなたが正しくそれを破るためにどのように私を助けることができ、適切

破壊されていない2ページ目を？

Answer 1

media printを使用してください。あなたのCSSを@media printに書いてください。

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