5

I'm facing a issue on page counting on browser's Print View.

Creating a report with tables separated by categories I need to reset the counter by category and when we create a long data table with undetermined number of lines we can't count how many times the table header will be shown to determine how many pages will have that category.

Is there a way to count on print view how many times the header will be shown?

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>

4

1 回答 1

2

恐怕用 css 添加计数打印数字是不可能的。

如果 Firefox 是MDN 说明的一个选项，您可能会绕过这个问题：

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

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

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

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

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

于 2019-02-10T23:34:29.877 回答