html - 关于打印 View 问题的 CSS 反增量页面

Question

我在浏览器的打印 View 上遇到页数问题。

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

有没有办法在打印 View 中计算标题将显示多少次？

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 的一个选项，您可能会解决这个问题。 :

Using CSS counter to print page numbers only works on Firefox. It’s unclear if the behavior is defined in the specification and whether or not it would be supported in other browsers at all. See issue filed with Chromium.

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

查看完整 code snippet in JSFiddle .

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

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