CSS counter-increment page on print view issue

问题

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>

回答1:

I am afraid that adding count print numbers with css is not possible.

You might get around this issue if Firefox is an option as 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;
  }

See full code snippet in JSFiddle.

Keep in mind that although possible in Firefox, this feature would be considered extremely buggy and it would be difficult to do further customizations and styling. This feature is impossible in in-browser printing.

If server side PDF generation is an option, there are a couple of libraries that can work for you, such as PDFjs, Prince and so on.

来源：https://stackoverflow.com/questions/50681472/css-counter-increment-page-on-print-view-issue

标签

html

css

html-table

report

reporting