1

所以，我有这个页面，其中包含一个包含很多行的表格，需要打印为硬拷贝。当我PDF从该页面打印或获取输出时发生了一些奇怪的事情：在第一页之后，其余页面完全失去了它们的CSS样式，例如字体、颜色、表格边框等。这个问题只发生在 Firefox 和 Chrome打印或PDF输出都没有问题。当我print preview在 Firefox 中查看时，一切似乎都很好。

这就是我设法将我的长表分成几页的方法。发生分页后，它有什么理由失去它的风格吗？

@media print {
    .table-striped{
      //my table
      page-break-inside:auto;
      tr{
        page-break-inside:avoid;
      }
    }
    .isPrint{
     //main div which wraps table
        page-break-inside: auto;
      }

    .table-bordered > thead > tr > th {
        background: #666 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
      }
    .table-bordered > tbody > tr > td {
        -webkit-print-color-adjust: exact;
      }
    .table.table-bordered tr:nth-child(odd) > td {
        background: #e5e5e5 !important;
       -webkit-print-color-adjust: exact;
      }
    .table-bordered > thead > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > tfoot > tr > td {
        border: 1px solid #000 !important;
        -webkit-print-color-adjust: exact;
      }

}

编辑：这就是我的 html 代码的运行方式。我还在上面的 css 部分添加了表类：

<article class="isPrint">
  <table class="table table-bordered table-striped" style="font-family: mitraBold" ng-if="items.length > 0">
    <thead>
      <tr>
        <th>INDEX</th>
        <th>ID</th>
        <th>NAME</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in items track by $index">
        <td>{{$index+1}}</td>
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>      
      </tr>
    </tbody>
  </table>
  <h1 class="text-center" ng-if="items.length <= 0">
    ERROR
  </h1>
</article>
4

0 回答 0