Вывод номеров страниц при печати HTML с CSS: @page rule

Быстрый ответ

Для нумерации страниц печатного HTML-документа используйте CSS-счетчик. Для этого сбросьте счетчик для тега body с использованием counter-reset и увеличивайте его значение через counter-increment для специально созданного класса. Номер страницы вы можете отобразить с помощью content:

@media print {
  body {
    counter-reset: pageNumber;
  }

  .page::after {
    counter-increment: pageNumber;
    content: "Страница " counter(pageNumber);
    text-align: right;
    padding: 5px;
  }
}

В этом случае каждую страницу следует обернуть в <div class="page"></div>:

<div class="page">Содержимое первой страницы</div>
<div class="page">Содержимое второй страницы</div>

Такая конфигурация гарантирует аккуратную и последовательную нумерацию документов при печати.

Улучшенное использование CSS-счетчиков

Можно улучшить данное решение, применив display: table для многостраничного контента и псевдоэлемент :after для автоматического инкремента номеров страниц:

body {
  counter-reset: page;
  display: table;
}

body::after {
  display: table-footer-group;
  counter-increment: page;
  content: "Страница " counter(page);
}

Такой подход обеспечивает корректное расположение номеров страниц, независимо от их содержимого.

Адаптация под различные браузеры

Учитывая особенности разных браузеров, подготовьте альтернативные решения. Например, для Firefox 20+ подойдет следующий код:

@page {
  @bottom-center {
    content: counter(page, decimal-leading-zero);
  }
}

Данный код добавит номера страниц с ведущими нулями и разместит их внизу по центру.

Адаптация к динамическому контенту

Если страницы web-документа меняются в реальном времени, используйте window.onload для инициализации функции, которая будет динамически расчитывать количество страниц:

window.onload = function() {
  var pages = Math.ceil(document.body.scrollHeight / window.innerHeight);
  for(var i = 0; i < pages; i++) {
    var pageNumberDiv = document.createElement('div');
    pageNumberDiv.style.position = "absolute";
    pageNumberDiv.style.top = "calc((i + 1) * 100vh – 50px)";
    pageNumberDiv.innerHTML = "Страница " + (i + 1);
    document.body.appendChild(pageNumberDiv);
  }
}

После загрузки документа вы увидите обновленные номера страниц, которые будут соответствовать текущему содержимому.

Возможности печати в различных браузерах с использованием Paged.js

Для более гибкого решения рассмотрите использование Paged.js, который поддерживает функциональность печати HTML-документов:

Paged.registerHandlers(class extends Paged.Handler {
  constructor(chunker, polisher, caller) {
    super(chunker, polisher, caller);
  }
  
  afterRendered(pages) {
    pages.forEach(page => {
      let pageNumberDiv = document.createElement('div');
      pageNumberDiv.classList.add('page-number');
      pageNumberDiv.innerHTML = "Страница " + page.position;
      page.element.appendChild(pageNumberDiv);
    });
  }
});

Визуализация

Если представить операции CSS как сцены в театре, где каждая страница – это отдельная сцена:

Сцена 1: 🖥️ Страница 1 📄
Сцена 2: 🖥️ Страница 2 📄
Сцена 3: 🖥️ Страница 3 📄

Тогда, когда браузер открывает сцену, для пользователей важно быстро ориентироваться на странице:

<style>
  @media print {
    body::after {
      content: counter(page);
      position: fixed;
      bottom: 10px;
      right: 10px;
      font-size: 20px;
    }
  }
</style>

Теперь перемещение между страницами будет таким же логичным и организованным, как и в качественном театральном представлении.

Полезные материалы

1. Модуль CSS Paged Media Level 3 – Спецификация W3C, включающая функциональность нумерации страниц.
2. Использование счетчиков CSS – CSS: Каскадные таблицы стилей | MDN – Руководство по использованию счетчиков CSS.
3. Дизайн печатных изданий с помощью CSS — Smashing Magazine – Техники верстки печатных HTML-страниц.
4. Print.js – библиотека для печати HTML-элементов, PDF и изображений – Библиотека для облегчения печати HTML и PDF.
5. page-break | CSS-Tricks – Объяснение свойств для печати страниц.
6. CSS Paged Media (@page) | Can I use... – Информация о поддержке форматирования страниц CSS различными браузерами.