在打印预览问题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等库。