使用Javascript和CSS打印多页

MultiPage print with Javascript and CSS

本文关键字：打印 CSS Javascript 使用      更新时间：2024-05-10

在打印多个多页报告时，我面临显示页码的问题

下面是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行之后添加额外的行，并添加一个带有页码的分页符。但这在不同的报告中并不一致。

它的工作是这样的：

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并重命名

相关文章：