Как напечатать номер страницы при печати HTML в новом Chrome?

Question

Мне нужно напечатать номер страницы при печати HTML в Chrome версии 52.0.2743.116 м (64-разрядная версия). Однако я еще не нашел ответ.

Я уже пробовал это:

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

Это не сработало вообще.

Тогда я нашел этот вопрос и ответ:

---

Для этого ответа мы не используем @page, который является чистым ответом CSS, но работаем в версиях FireFox 20+. Вот ссылка на пример. CSS это:

#content {
    display: table;
 }
#pageFooter {
    display: table-footer-group;
 }

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
 }

И HTML-код:

 <div id="content">
     <div id="pageFooter">Page </div>
     multi-page content here...
 </div>

---

К сожалению, это работает только в версиях FireFox 20+ и Chrome версии 35.0.1916.153

Понижение не ответ. Не могли бы вы мне помочь?

Answer 1

Эта настройка работает для меня, вам просто нужен элемент в конце каждой страницы, чтобы добавить счетчик страниц.

Код:

HTML:

body {
  counter-reset: section;
}

@media print {
  .page {
    page-break-after: always;
  }
  .page .pageEnd::after {
    counter-increment: section;
    /* Increment the section counter*/
    content: "Page " counter(section) " ";
    /* Display the counter */
  }
}

<div class="page">
  <h2>Here is page 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
  <div class="pageEnd"></div>
</div>
<div class="page">
  <h2>Here is page 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
  <div class="pageEnd"></div>
</div>
<div class="page">
  <h2>Here is page 3</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
  <div class="pageEnd"></div>
</div>
<div class="page">
  <h2>Here is page 4</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
  <div class="pageEnd"></div>
</div>
<div class="page">
  <h2>Here is page 5</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
  <div class="pageEnd"></div>
</div>
<div class="page">
  <h2>Here is page 6</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
  <div class="pageEnd"></div>
</div>
<div class="page">
  <h2>Here is page 7</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p>
  <div class="pageEnd"></div>
</div>