Почему стоит добавить кнопку печати? Кнопка печати — это удобство для пользователя: один клик вместо нескольких шагов через меню браузера (Файл → Печать…). Также это шанс контролировать, что именно попадает на бумагу: убрать баннеры, скрыть сайдбары, показать только главное содержание или подготовить аккуратно отформатированный PDF.

Важно: «печать» в браузере — это не только отправка на физический принтер. Читатели часто сохраняют страницу в PDF через диалог печати. Выбирайте формат, который соответствует их задачам.

Четыре подхода к добавлению кнопки печати

Ниже — четыре распространённых техники от самой простой до максимально контролируемой.

1. Самый простой — HTML + JavaScript

Подходит для: лёгких сайтов, где вам не нужно менять вид в печати.

Код кнопки:

Печать

Альтернатива в виде текстовой ссылки:

Распечатать страницу

Плюсы: очень просто, мгновенно работает во всех современных браузерах. Минусы: вы не контролируете, какие элементы печатаются; браузер сам попытается уместить текущую страницу на листы.

Рекомендация: разместите кнопку в заметном месте — вверху статьи, в боковой панели или рядом с заголовком, чтобы читатель увидел её перед копированием или сохранением.

2. Контроль через CSS — печатные стили

Подходит для: сайтов со сложной версткой, рекламой, сайдбарами, когда нужно скрыть лишние элементы.

Идея: подключить отдельный CSS-файл с правилами для печати и пометить элементы, которые должны отображаться.

В вашей страницы подключите файл вида:

Пример наполняемого файла print.css:

/* Скрываем стандартные области, которые не нужны в печати */
#header, #newflash, #banner { display: none !important; }

/* По умолчанию делаем всё скрытым — затем помечаем классом .print те фрагменты, которые хотим увидеть */
body { visibility: hidden; }
.print { visibility: visible; }

/* Альтернатива: более безопасный подход — управлять display */
/*
body * { display: none !important; }
.print, .print * { display: block !important; }
*/

/* Дополнительные правила для печати: размеры шрифтов, поля страницы, цвета */
@page { margin: 12mm; }
body { font-size: 12pt; color: #000; background: none; }

HTML-разметка: пометьте те элементы, которые должны печататься, классом print.

  
Заголовок для печати
  
Этот блок будет виден в печати.


Навигация, реклама — не печатать

Плюсы: высокий контроль над тем, что печатается. Минусы: придётся тщательно пробежать по страницам и пометить нужные секции; сложнее поддерживать на сайтах с большим количеством шаблонов.

Совет: используйте инструменты разработчика в браузере и режим печати, чтобы быстро тестировать, какие классы работают, и отлаживать вид.

3. Печатные страницы на основе отдельной вёрстки

Подходит для: статьи, руководства или страницы, где требуется точное оформление — таблицы содержимого, колонтитулы, нумерация.

Идея: подготовить отдельную HTML-страницу или шаблон, оптимизированный для печати, и вызвать её через ссылку или открыть в новом окне и распечатать.

Пример ссылки на отдельную печатную версию:

Печатная версия (PDF / HTML)

Вы можете генерировать такую страницу на сервере динамически, отбрасывая лишние блоки и подставляя подготовленные стили. Это удобно для многократного контроля: вы можете отдельно проверять и вёрстать печатную версию.

4. Отдельный PDF, DOC или другой файл

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

Простой способ — сохранить контент в PDF и разместить файл на сервере. Ссылка на PDF откроется в браузере или скачает файл, а пользователь отправит его на принтер с сохранением дизайна.

Пример ссылки на PDF:

Скачать PDF для печати

Плюсы: полный контроль над оформлением и расположением элементов, четкая типографика. Минусы: нужно дополнительно генерировать PDF (ручной или автоматический процесс), поддерживать версию актуальной при обновлении содержания.

Когда эти подходы не сработают

• Сильно динамический контент (интерактивные виджеты, SPA) может некорректно отображаться при простом вызове window.print(). Для SPA используйте серверную генерацию печатной страницы или предварительную «заморозку» данных перед печатью.
• Элементы, отрисованные Canvas/WebGL, могут не попадать в печать как вектор/изображение. Решение — экспортировать содержимое в изображение и вставлять в печатную версию.
• Контент, загружаемый асинхронно (AJAX), может не успеть отрендериться к моменту вызова window.print(). Вставьте задержку или печатайте только после получения данных.

Альтернативные подходы и расширения

• Использовать JavaScript-библиотеки, которые создают печатные документы (например, jsPDF для генерации PDF на клиенте). Это полезно, если вы хотите позволить пользователю настроить формат перед сохранением.
• Для SPA фреймворков (React/Vue/Angular) сделать отдельный маршрут /print/*, где сервер выдаёт статичную версию страницы, или рендерить компонент для печати с сервисом SSR.
• Для CMS (WordPress/Drupal) существуют плагины, которые автоматически генерируют печатные шаблоны и PDF.

Мини-методология внедрения печати на сайте

1. Оцените потребности: нужен ли простой доступ или точный дизайн в печати?
2. Выберите метод: window.print(), CSS-печатный файл, отдельная печатная страница или PDF.
3. Прототип: сделайте одну типовую страницу и протестируйте в нескольких браузерах и принтерах (или в сохранении в PDF).
4. Инструмент тестирования: проверьте @media print в DevTools, убедитесь, что все скрытые элементы действительно не печатаются.
5. Развертывание: добавьте кнопку/ссылку в шаблон и обеспечьте доступность (aria-label для кнопок).
6. Поддержка: периодически проверяйте печатные версии при изменениях верстки.

Ролевые чек-листы

• Для разработчика:

  • Проверить, что подключён правильно.
  • Убедиться, что window.print() не вызывается преждевременно.
  • Протестировать на основных браузерах (Chrome, Firefox, Safari, Edge).

• Для дизайнера:

  • Установить типографику и размеры для печати.
  • Определить, какие элементы обязательны в печатной версии.

• Для контент-менеджера:

  • Отметить важные блоки классом .print или подготовить контент для PDF.
  • Проверять актуальность PDF-версий при каждом обновлении статьи.

Шпаргалка — готовые сниппеты

Кнопка с доступностью:

Печать

Подключение печатного стиля:

Пример CSS-правил для печати:

@media print {
  nav, footer, .advertisement { display: none !important; }
  body { color: #000; background: none !important; }
}

Критерии приёмки

• Кнопка доступна и видима на странице.
• Печатная версия не содержит рекламных блоков и ненужных элементов.
• Печать в основных браузерах даёт читаемый результат (шрифты, отступы).
• PDF-версия (если есть) соответствует текущему содержимому.

Краткий глоссарий

• window.print(): встроенный метод браузера для запуска диалога печати.
• @media print: CSS-правила, применяемые только при печати.
• PDF: формат документа, дающий фиксированное представление макета.

Когда выбрать что

• Если нужен быстрый доступ — используйте window.print().
• Если нужно скрыть рекламные блоки и меню — используйте print.css.
• Если нужен единообразный внешний вид — подготовьте PDF или отдельную печатную страницу.

Итог и призыв к действию

Добавление кнопки печати — низкозатратный способ улучшить пользовательский опыт. Начните с простого решения и по мере роста требований переходите на более формализованные подходы: печатные стили или PDF. Проверьте результат на реальных страницах и попросите коллег протестировать на разных принтерах.

Поделитесь своим опытом: какой метод используете вы и с какими проблемами сталкивались при настройке печати?

Image Credit: Sundeip Arora