打印视图问题的 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 指出：

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

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

查看 JSFiddle 中的完整代码片段。

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

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