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

vmjh9lq9 于 2023-05-12 发布在 Java

关注(0)|答案(3)|浏览(991)

我尝试在浏览器中使用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

来源：https://stackoverflow.com/questions/54453533/how-to-add-page-numbers-during-print-in-the-browser

3条答案

按热度按时间

yrwegjxp1#

复制css和使一个文件调用css在yourcss和完成的页眉和页脚选项在 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>

赞(0）回复(0）举报 2023-05-12

yzuktlbb2#

把它添加到你的CSS中。它的建立到页脚的每一页，至少在 chrome ，所以然后它会自动添加页码。希望这能帮助到一些人。花了几个小时尝试动态添加页面

@media print {
    footer {
        display: inline-block;
  }
}

赞(0）回复(0）举报 2023-05-12

sz81bmfz3#

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

赞(0）回复(0）举报 2023-05-12

我来回答

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

3条答案

相关问题

热门标签

最新问答