如何在html页面的打印预览中打印页码包含表格

Question

这里我有一些表格，我需要打印这个html页面，带有页码，表格内容可能会动态变化，我无法动态打印页码，我尝试了很多方法但我找不到解决方案呢。 我需要打印页码，例如“第 2/6 页”

下面是我的html示例

<style>
.page { 
page-break-before:always;
}
@page {
size: A4;
 margin: 0;
}
@media print {
 @page {
  size: A4;
  margin: 0;
}


}
</style>
<table  class='page'>
 <tr><td></td></tr>....
 </table>
 <table  class='page'>
 <tr><td></td></tr>....
 </table>
 <table  class='page'>
 <tr><td></td></tr>....
 </table>
 <table  class='page'>
 <tr><td></td></tr>....
 </table >
<script>
window.print();
</script>

Answer 1

如果你愿意，你可以使用计数器

body{
  counter-reset: page;
}

.page-counter:after {
    counter-increment: page;
    content: "Page " counter(page);
}

<div class="page">
  fake content
  <div class="page-counter"></div>
</div>

<div class="page">
  fake content
  <div class="page-counter"></div>
</div>

如果您想使用“第 1 / 10 页”，您可以创建一个 div，其中的跨度等于您拥有的页数

body{
  counter-reset: page;
}

#total-counter{
    counter-reset: totalPages;
}
#total-counter span{
  counter-increment: totalPages;
}

.page-counter:after {
    counter-increment: page;
    content: "Page " counter(page) " / " counter(totalPages);
}

<div id="total-counter">
  <span></span>
  <span></span>
</div>

<div class="page">
  fake content
  <div class="page-counter"></div>
</div>

<div class="page">
  fake content
  <div class="page-counter"></div>
</div>