Печать из браузера и CSS @media print

↑ 5.6 PDF и печатные формы на клиенте · ← Предыдущая · → Следующая

Обязательно~3 мин чтенияУровень: middle

Зачем это на собесе

Самый надёжный способ печатных форм на клиенте — обычная вёрстка с print-стилями.

Объяснение

Браузер печатает страницу и позволяет «Сохранить как PDF» — векторно, с выделяемым текстом. Управляем видом через @media print и @page.

@page { size: A4 portrait; margin: 15mm 12mm; }
@page :first { margin-top: 25mm; }
 
@media print {
  body { background: #fff; color: #000; font: 11pt/1.4 "Times New Roman", serif; }
  .no-print, nav, aside, button { display: none !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; }          /* URL после ссылок */
  table { border-collapse: collapse; width: 100%; }
  thead { display: table-header-group; }                                       /* повтор шапки на каждой странице */
  tr, img, figure { break-inside: avoid; }                                     /* не разрывать строку/блок */
  h2 { break-after: avoid; }
  .page-break { break-before: page; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }          /* печатать фоны */
}

window.print();                                                                 // диалог печати
window.addEventListener("beforeprint", prepare); window.addEventListener("afterprint", cleanup);
// Печать отдельного фрагмента: скрытый iframe или окно с выбранной разметкой
const win = window.open("", "_blank")!; win.document.write(html); win.document.close(); win.onload = () => win.print();

Практики печатных форм:

Задача	Решение
Единицы измерения	mm, pt, cm вместо px/vh
Разбиение на страницы	break-before/after/inside, page-break-* (легаси)
Повтор шапки таблицы	thead { display: table-header-group }
Колонтитулы, номера страниц	@page margin boxes (@bottom-center { content: counter(page) }) — поддержка ограничена; надёжнее — серверный рендер или библиотеки (Paged.js)
Формы с точной вёрсткой	фиксированная сетка на mm, position: absolute для бланков
Печать без диалога	недоступно из браузера (только киоск-режим/сервер)
Предпросмотр	отдельная страница «для печати»

Полифилл для сложных требований: Paged.js (CSS Paged Media), серверный рендер Playwright/Chromium page.pdf() — единый результат.

Нюансы и подводные камни

• Браузеры по-разному разбивают страницы и обрабатывают @page (Safari особенно).
• Пользователь может включить/выключить фоновую графику и колонтитулы в диалоге печати.
• Стили экрана применяются к печати, если не переопределены.
• Динамические изображения и шрифты должны быть загружены до print().
• Печать SPA: рендерите маршрут «печатной версии», а не «скриншот».

Практика

1. Подготовьте print-стили для страницы счёта (A4, повтор шапки таблицы, без навигации).
2. Проверьте результат в Chrome, Firefox и Safari.
3. Реализуйте кнопку «Печать» с beforeprint/afterprint.

Вопросы с ответами

Почему печать через CSS лучше html2canvas для документов?

Результат векторный, текст выделяется, размер меньше, разбиение страниц управляется CSS.

Как повторить шапку таблицы на каждой странице?

thead { display: table-header-group; } в print-стилях.

Связанные темы

• html2canvas
• Stimulsoft Reports