如何在浏览器中打印期间添加页码

Question

我正在尝试使用CSS3 @page规则在浏览器中打印时添加页码,如下所示

@page {
    size: A4;
    margin: 5%;
    padding: 0 0 10%;
}

@page {
   @bottom-right {
    content: counter(page) " of " counter(pages);
   }
}

我通过互联网知道这只适用于Firefox 链接

我也尝试了这个仅用于段落的链接,但我的页面是用不同类型的元素组成的,如table,div,p等

如何在任何浏览器上打印时添加页码

谁能帮我？

Answer 1

.page{
counter-reset: page;
}
.page .page-number{
  display:block;
  }
.page .page-number:after{
counter-increment: page;
content:counter(page);
}
.page:after{
    display: block;
    content: "Number of pages: " counter(page);
}

<div class="page">
<span class="page-number">Page </span>
<span class="page-number">Page </span>
<span class="page-number">Page </span>
<span class="page-number">Page </span>
</div>