Добавление номеров страниц в HTML-печать: несколько методов, объясненных примерами кода

В этой статье блога мы рассмотрим несколько способов добавления номеров страниц при печати HTML-документа. Мы предоставим примеры кода для каждого метода, что позволит вам выбрать тот, который лучше всего соответствует вашим потребностям. Давайте погрузимся!

Метод 1. Использование счетчиков CSS

Один из способов добавления номеров страниц — использование счетчиков CSS. Счетчики CSS — это переменные, которые увеличивают или уменьшают свои значения каждый раз, когда встречается указанный элемент. Вот пример того, как можно добавлять номера страниц с помощью счетчиков CSS:

counter(page);

Страница

Объяснение:

Мы определяем счетчик CSS под названием «страница», используя правило @page.
Внутри класса .page-numberмы используем псевдоэлемент ::afterдля отображения значения счетчика «страниц».

Метод 2: подход на основе JavaScript

Другой метод — динамическое добавление номеров страниц с помощью JavaScript. Такой подход обеспечивает большую гибкость и настройку. Вот пример:

<body>
  <script>
    window.onload = function () {
      var pageCount = 0;
      var pageNumbers = document.getElementsByClassName("page-number");
      for (var i = 0; i < pageNumbers.length; i++) {
        pageCount++;
        pageNumbers[i].innerText = "Page " + pageCount;
      }
    };
  </script>
  <div class="page-number">Page </div>
</body>

Объяснение:

Мы используем JavaScript для получения всех элементов класса «номер страницы».
Событие window.onloadгарантирует, что сценарий запустится после завершения загрузки страницы.
Мы перебираем каждый элемент и обновляем его текстовое содержимое соответствующим номером страницы.

Метод 3. Таблицы стилей печати CSS

Таблицы стилей печати CSS позволяют определять определенные стили для печатных документов. Используя правило @pageи свойство content, вы можете добавлять номера страниц непосредственно в таблицу стилей печати. Вот пример:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

Внутри print.css:

Счетчик «Страница» (страница);

Объяснение:

Мы связываем внешний CSS-файл (print.css) с HTML-документом с помощью тега .
Внутри print.cssмы определяем правило @pageи используем свойство contentс counter(page)функция для отображения номера страницы внизу по центру каждой напечатанной страницы.

В этой статье мы рассмотрели несколько способов добавления номеров страниц при печати HTML-документа. Мы рассмотрели использование счетчиков CSS, подходов на основе JavaScript и таблиц стилей печати CSS. Каждый метод предоставляет разные уровни настройки, что позволяет вам выбрать наиболее подходящий вариант для ваших нужд. Поэкспериментируйте с этими методами и улучшите качество печати HTML-документов.

Не забудьте оптимизировать свою веб-страницу, добавив соответствующие метатеги, релевантный контент и описательный заголовок, чтобы улучшить ее видимость в поисковых системах.