Оформление документов

Как добавить номера страниц, даты и заголовки в PDF

Как добавить номера страниц, даты и заголовки в PDF

Если вы сохраняете кулинарный рецепт, простого скриншота вполне достаточно.

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

В наш инструмент встроен профессиональный движок «Колонтитулов» (Header & Footer). Он позволяет автоматически внедрять эту информацию на каждую страницу вашего PDF.

Вот как это использовать, включая несколько готовых шаблонов, которые вы можете скопировать прямо сейчас.

Как это работает

В разделе «Advanced Settings» (Дополнительные настройки) нашего инструмента вы найдете два поля:

  1. Header HTML (Появляется в самом верху каждой страницы)
  2. Footer HTML (Появляется в самом низу каждой страницы)

header & footer templates

Здесь вы можете писать стандартный HTML, но настоящая магия происходит при использовании наших Специальных CSS-классов. Если вы используете эти классы, наш конвертер автоматически подставит правильные данные:

  • <span class='date'></span> → Вставляет текущую дату печати.
  • <span class='title'></span> → Вставляет заголовок веб-страницы.
  • <span class='url'></span> → Вставляет URL-адрес источника.
  • <span class='pageNumber'></span> → Вставляет номер текущей страницы.
  • <span class='totalPages'></span> → Вставляет общее количество страниц.

3 Шаблона для копирования (Copy & Paste)

Мы написали их, используя надежный и чистый CSS (style="..."), чтобы они идеально отображались в PDF без необходимости во внешних стилях.

1. «Простой номер страницы» (Нижний колонтитул)

Это классика. Размещает маленький номер страницы по центру внизу каждого листа.

Вставьте это в «Footer HTML»:

<div style="font-size: 10px; text-align: center; width: 100%; padding-top: 5px;">
  Страница <span class="pageNumber"></span> из <span class="totalPages"></span>
</div>

2. «Архивный» колонтитул (Юридический/Исследовательский)

Идеально подходит для фиксации доказательств. Слева указывается URL источника, а справа — дата сохранения.

Вставьте это в «Footer HTML»:

<div style="font-size: 8px; width: 100%; border-top: 1px solid #ccc; padding-top: 5px; overflow: hidden;">
  <span style="float: left; max-width: 70%;">Источник: <span class="url"></span></span>
  <span style="float: right;">Сохранено: <span class="date"></span></span>
</div>

3. Заголовок «Профессиональный отчет»

Делает ваш веб-снимок похожим на официальный документ. Заголовок выделен жирным шрифтом слева, а дата — справа.

Вставьте это в «Header HTML»:

<div style="font-size: 10px; width: 100%; margin-bottom: 10px; overflow: hidden;">
  <span style="float: left; font-weight: bold; max-width: 75%;" class="title"></span>
  <span style="float: right;" class="date"></span>
</div>

Важные советы

  1. ⚠️ Вы ОБЯЗАНЫ настроить поля: Колонтитулы печатаются внутри полей страницы. Если ваши поля (Margins) установлены на «0», ваш заголовок будет невидим! Вы должны установить верхнее и нижнее поля как минимум на 0.4in (или 10mm), чтобы эти шаблоны отобразились.
  2. Размер шрифта: PDF-движок обрабатывает шрифты иначе, чем экран. Мы рекомендуем использовать от 8px до 10px. Всё, что меньше, может стать нечитаемым.

Готовы выйти на новый уровень? Освоение колонтитулов — это только один шаг. Больше советов по созданию профессиональных документов вы найдете в Полном руководстве по созданию идеального PDF из веб-страницы.

Похожие статьи