如何解决如何在html页面包含表的打印预览中打印页码
这里我有一些表格,我需要打印此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>
解决方法
如果需要,您可以使用计数器
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。