html - 如何在包含表格的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>