Как добавить номера страниц во время печати в браузере - PullRequest
Новая
       36

Как добавить номера страниц во время печати в браузере

0 голосов
/ 31 января 2019

Я пытаюсь добавить номер страницы во время печати в браузере, используя правило CSS3 @page следующим образом 

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

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

Я знаю через Интернет, что это работает только для Firefox ссылка

Я также пробовал эту ссылку , которая только для абзаца, но моя страница сделана с различными типами элементов, таких как table, div, p и т. Д.

Как добавитьномер страницы при печати через любой браузер

Кто-нибудь может мне помочь?

Ответы [ 2 ]

0 голосов
/ 11 июня 2019

Скопируйте css и сделайте один вызов файла, что css в yourcss и сделано с опцией верхнего и нижнего колонтитула в опции chrome advance, дают 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 голосов
/ 31 января 2019 

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