Вставка разрыва страницы в HTML для wkhtmltopdf: советы
Быстрый ответ
Для создания разрыва страницы в PDF, которое сгенерировано при помощи wkhtmltopdf, вы можете применить CSS-свойство page-break-after
к элементу:
<div style="page-break-after: always;"></div>
Этот элемент будет служить сигналом для wkhtmltopdf, указывая на начало новой страницы в сформированном PDF-документе. Его можно разместить в любом месте документа, где требуется разделить страницы.
[AsideBanner]
Три ключевых свойства управления разрывами страниц: после, перед и внутри
Для более детального управления разрывами страниц используйте три ключевых свойства:
Перед элементами:
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-документы.
Полезные материалы
- Официальная документация Wkhtmltopdf — это первоисточник по управлению разрывами страниц.
- Позиционирование в CSS на CSS Tricks — основы позиционирования в контексте разрывов и декораций.
- Обсуждение на Stack Overflow — полезные советы сообщества по работе с wkhtmltopdf.
- W3Schools об использовании свойства page-break-before — прIMERы использования для оптимального вывода PDF.
- Проблемы и решения на GitHub — это issue-трекер wkhtmltopdf.
- Техники для WCAG 2.0 — лучшие практические примеры доступности PDF.
- Smashing Magazine о печати с использованием CSS — подходы к печати посредством CSS.