打印视图问题上的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 添加计数打印数字是不可能的。

\n\n

如果 Firefox 是MDN 指出的一个选项，您可能会解决此问题：

\n\n

\n

使用 CSS 计数器打印页码仅适用于 Firefox。目前还不清楚该行为是否在规范中定义，以及其他浏览器是否支持它。请参阅向 Chromium 提交的问题。

\n

\n\n

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

\n\n

请参阅 JSFiddle 中的完整代码片段。

\n\n

请记住，虽然在 Firefox 中可行，但此功能将被认为是极其错误的，并且很难进行进一步的自定义和样式设置。此功能在浏览器内打印中是不可能的。

\n\n

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

\n