文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在浏览器中打印时添加页码

问如何在浏览器中打印时添加页码
EN

Stack Overflow用户

提问于 2019-01-31 12:54:31

回答 2查看 1.8K关注 0票数 5

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

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

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

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

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

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

有谁可以帮我？

javascript

html

css

printing-web-page

回答 2

Stack Overflow用户

发布于 2019-06-11 16:53:45

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

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

票数 0

Stack Overflow用户

发布于 2019-01-31 13:27:04

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

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54453533

复制

相似问题

问如何在浏览器中打印时添加页码
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在浏览器中打印时添加页码EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在浏览器中打印时添加页码
EN