javascript - 使用 Javascript 和 CSS 进行多页打印

Question

我在打印多个多页报告时遇到显示页码的问题

下面是示例 HTML 格式:

<style type="text/css"> body {
  counter-reset: report 1 page 0;
}
td.footer:after {
  counter-increment: page;
  content: "Page " counter(page)" of Report " counter(report);
}
.rowLabel3 {
  counter-reset: page 0;
  counter-increment: report
}
</style>

<table>
  <thead style="display: table-header-group;">
    <tr>
      <th>Report Specific Header Contents which needs to come on every page we are displaying report</th>
    </tr>
  </thead>
  <tbody style="display: table-row-group;">
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>
    <tr>
      <td>Some Data</td>
    </tr>

  </tbody>
  <tfoot style="display: table-footer-group;">
    <tr>
      <td class="footer">

      </td>
    </tr>
  </tfoot>
</table>

<div class="rowLabel3" style="page-break-after:always;">*** END OF REPORT ***</div>

<table>
  <thead style="display: table-header-group;">
    <tr>
      <th>Report Specific Header Contents which needs to come on every page we are displaying report</th>
    </tr>
  </thead>
  <tbody style="display: table-row-group;">
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
    <tr>
      <td>Some Data1</td>
    </tr>
  </tbody>
  <tfoot style="display: table-footer-group;">
    <tr>
      <td class="footer">

      </td>
    </tr>
  </tfoot>
</table>
<div class="rowLabel3" style="page-break-after:always;">*** END OF REPORT ***</div>​

这里，当Tfoot出现在每个页面上时，它实际上并没有增加该部分。

如果这种方法是正确的，我尝试过的也是计算行数，然后在 40 行之后添加额外的行，并添加带有页码的分页符。但这在不同的报告中并不一致。

Answer 1

它是这样工作的:

body {
    counter-reset: report 1 page 0 ;
}

td.footer:after {
    counter-increment: page;
    content: "Page " counter(page) " of Report "  counter(report);
}
.rowLabel3{
  counter-reset: page 1;  
  counter-increment: report
}

我只是更改@page 并重命名