Вставка разрыва страницы в HTML для wkhtmltopdf: советы

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

Для создания разрыва страницы в PDF, которое сгенерировано при помощи wkhtmltopdf, вы можете применить CSS-свойство page-break-after к элементу:

<div style="page-break-after: always;"></div>

Этот элемент будет служить сигналом для wkhtmltopdf, указывая на начало новой страницы в сформированном PDF-документе. Его можно разместить в любом месте документа, где требуется разделить страницы.

Три ключевых свойства управления разрывами страниц: после, перед и внутри

Для более детального управления разрывами страниц используйте три ключевых свойства:

• Перед элементами:

  CSS

  Скопировать код

  .break-before {
    page-break-before: always;
  }

  Запустить код

• После элементов:

  CSS

  Скопировать код

  .break-after {
    page-break-after: always; 
  }

  Запустить код

• Внутри элементов:

  CSS

  Скопировать код

  .keep-together {
    page-break-inside: avoid;
  }

  Запустить код

Для улучшения визуального восприятия оберните элемент в <div> с определёнными стилями:

<div style="display:block; clear:both; page-break-after:always;"></div>

Усовершенствованное управление макетом

Используйте @page для настройки отступов страниц и управления orphaned и widowed строками:

• Настройка отступов:

  CSS

  Скопировать код

  @page {
    margin: 1in; 
  }

  Запустить код

• Orphans и Widows:

  CSS

  Скопировать код

  p {
    orphans: 3;
    widows: 3;
  }

  Запустить код

Управление разрывами страниц

Примените свойство box-decoration-break, чтобы более точно управлять внешним видом элементов при разрыве страницы:

.inline-element {
  box-decoration-break: clone;
}

Используйте size в @page для установки размера страницы:

@page {
  size: A4 portrait;
}

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

Разрыв страницы в HTML-документе можно воспринимать как финишную линию в гонке:

Перед разрывом страницы: Часть 1 гонки [🏃‍♀️🏃‍♀️🏃‍♀️🏁]
После разрыва страницы: Часть 2 гонки [🏃‍♀️🏃‍♀️🏃‍♀️]

wkhtmltopdf учитывает эти разрывы при формировании PDF:

<style>
  .page-break { page-break-after: always; }
</style>
<div class="page-break"></div>

Результат: Документ PDF разделён [🏃‍♀️🏃‍♀️🏃‍♀️| 🏁 | 🏃‍♀️🏃‍♀️🏃‍♀️]

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

Подробнее об этом расскажет наш спикер на видео

Преодоление трудностей

Некоторые выводы page-break могут оказаться неожиданными. Обратите внимание:

• Элементы Inline-block: Элементы, заданные как display: inline-block; могут проигнорировать разрывы страниц.

• Flexbox и Grid: Контейнеры, работающие на Flexbox или Grid, могут влиять на корректность разрывов страниц.

• Плавающие элементы: Убедитесь, что элементы со свойством float не влияют на разрывы страниц.

Проверка на практике

Не забывайте тестировать результат при помощи @media print:

@media print {
  .section-header {
    page-break-before: always;
  }
}

Обратите внимание, что @media print может изменить общую структуру вашего документа.

Изучайте wkhtmltopdf

Wkhtmltopdf обладает широкими возможностями. Не забывайте:

• Регулировать масштаб содержимого, чтобы избежать обрезания текста.
• Использовать единицы измерения, соответствующие размеру страницы, для оптимального отображения.

Уверенное владение wkhtmltopdf позволит вам создавать безупречные PDF-документы.

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

1. Официальная документация Wkhtmltopdf — это первоисточник по управлению разрывами страниц.
2. Позиционирование в CSS на CSS Tricks — основы позиционирования в контексте разрывов и декораций.
3. Обсуждение на Stack Overflow — полезные советы сообщества по работе с wkhtmltopdf.
4. W3Schools об использовании свойства page-break-before — прIMERы использования для оптимального вывода PDF.
5. Проблемы и решения на GitHub — это issue-трекер wkhtmltopdf.
6. Техники для WCAG 2.0 — лучшие практические примеры доступности PDF.
7. Smashing Magazine о печати с использованием CSS — подходы к печати посредством CSS.