Question

我在表打印预览中尝试布局，因为我注意到它在第二页中没有正确破坏，即使我使用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 print中写下你的CSS。

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

打印页面在第二页上没有正确破坏

1 个答案: