如何在html页面中的打印预览中打印页码包含表 [英] How to Print Page Number in Print Preview in html page contains table

问题描述

这里我有一些表格，我需要打印此html页面，并带有页码，表格内容可能会动态变化，我无法动态打印页码，我尝试了很多方法，但是我找不到解决方案呢.我需要打印类似于第2/6页"的页码

here i have some of the tables , i need to print this html page, with page number,the table content may differ dynamically, i unable to print the page number dynamically ,I have tried so many ways but i unable to find solution yet. I need to Print page Number like "Page no 2/6"

下面是我的html示例

Below is my html sample

<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>

推荐答案

如果需要，您可以使用计数器

If you want you can use counter

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，其内跨度等于您拥有的页数

If you want to use " page 1 / 10" you can create a div with spans inside of it equal to the number pages you have

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>

这篇关于如何在html页面中的打印预览中打印页码包含表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！