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

【问题标题】：How to add page numbers during print in the Browser如何在浏览器中打印期间添加页码
【发布时间】：2019-06-24 11:57:06
【问题描述】：

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

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

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

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

我也试过这个link，它只适用于段落，但我的页面是由不同类型的元素组成的，比如 table、div、p 等

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

谁能帮帮我？

【问题讨论】：

标签： javascript html css printing-web-page

【解决方案1】：

复制 css 并在 yourcss 中调用 css 并在 chrome 高级选项中的页眉和页脚选项上完成一个文件调用，将 id="www" 提供给正文

<script type="text/javascript">
 function PrintPanel() {
     var panel = document.getElementById("www");
     var printWindow = window.open();
     printWindow.document.write(panel.innerHTML);
     printWindow.document.write('<link href="yourecss.css" rel="stylesheet" />');
     printWindow.document.write('</body></html>');
     printWindow.document.close();
     setTimeout(function () {
         printWindow.print();
         printWindow.close();
     }, 1200);
     return false;
 }
 </script>

【讨论】：

【解决方案2】：

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

【讨论】：

上面的代码是特定的，比如'.page-number'，但我想使用@page { size: A4; 添加页码；保证金：5%；填充：0 0 10%； }
使用@media print { html, body { width: 210mm;高度：297mm； }