打印视图问题上的CSS计数器增量页面

Question

我在浏览器的打印视图上面临一个关于页面计数的问题。

创建一个包含按类别分隔的表的报表我需要按类别重置计数器，当我们创建一个行数不确定的长数据表时，我们无法计算表头的显示次数以确定多少次页面将具有该类别。

有没有办法指望打印视图显示标题的次数？

的jsfiddle

https://jsfiddle.net/7prs03eh/3/

.report-table {
  page-break-after: always;
  counter-reset: page;
}

.report-header {
  display: table-header-group;
}

.report-header tr th span.page-number:after {
  counter-increment: page;
  content: "Pag:" counter(page);
}

.report-footer {
  display: table-footer-group;
}

<button onclick="window.print();">Print</button>
<table class="report-table">
  <thead class="report-header">
    <tr colspan="3"> Category 1 </tr>
    <tr>
      <th>content</th>
      <th>content</th>
      <th><span class="page-number"></span></th>
    </tr>
  </thead>
  <tfoot class="report-footer">
    <tr>
      <td></td>
      <td>total</td>
      <td>$ 0,00 </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
    <tr>
      <td>long</td>
      <td>data</td>
      <td>here</td>
    </tr>
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
  </tbody>
</table>

<table class="report-table">
  <thead class="report-header">
    <tr colspan="3"> Category 2 </tr>
    <tr>
      <th>content</th>
      <th>content</th>
      <th><span class="page-number"></span></th>
    </tr>
  </thead>
  <tfoot class="report-footer">
    <tr>
      <td></td>
      <td>total</td>
      <td>$ 0,00 </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
    <tr>
      <td>long</td>
      <td>data</td>
      <td>here</td>
    </tr>
    <tr>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
  </tbody>
</table>

Answer 1

恐怕不可能添加计数打印编号和css。

如果Firefox作为MDN notes的选项，您可能会解决此问题：

  

使用CSS计数器打印页码仅在Firefox上有效。目前尚不清楚规范中是否定义了该行为，以及其他浏览器是否完全支持该行为。 See issue filed with Chromium.

#print-foot:after {
    content: counter(page);
    counter-increment: page;
  }

查看完整的code snippet in JSFiddle。

请记住，尽管可以在Firefox中使用此功能，但仍将其视为extremely buggy，并且很难进行进一步的自定义和样式设置。浏览器内打印无法使用此功能。

如果选择服务器端 PDF生成，则有两个库可以为您工作，例如PDFjs，Prince等。