html - 打印页面在第二页上没有正确分页

标签 html css laravel

我正在尝试表格打印预览中的布局,但我注意到它在第二页中没有正确中断,即使我正在使用 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>

第一页正确分页,但之后就不是了。

查看输出的第一页。 enter image description here

未正确分页的第二页 enter image description here

你能帮我如何正确破解它吗?

最佳答案

使用媒体打印。在@media print 中编写您的 css。

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

关于html - 打印页面在第二页上没有正确分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44147698/

相关文章:

html - 中心导航元素 Bootstrap

javascript - 如何使用 JS 函数更改屏幕 BGcolor?

php - laravel 并从注销中删除重定向

javascript - Jquery 下拉菜单更改悬停时的字体粗细

html - 在此特定示例中,如何使 span 覆盖 div 的整个宽度?

php - Laravel 5.4 中的事件监听器

laravel eloquent 匹配多字表名时遇到问题

javascript - 在 dragenter 跨浏览器解决方案上检测文件类型

javascript - id 属性返回 null 或 undefined

javascript - 切片不针对所有实例