Коротко: добавление кнопки печати на сайт можно реализовать четырьмя практичными способами — простая JavaScript‑кнопка (window.print()), ссылка с JavaScript, CSS‑стили для печати (media=”print”) и заранее подготовленный PDF/DOC. Выберите метод по сложности страницы и требованиям к форматированию: для быстрых задач — JS, для чистой верстки — print.css, для идеального контроля — PDF.

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

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

Когда нужна кнопка печати

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

Важно: если ваша страница проста — достаточно JS‑кнопки. Если важен аккуратный вывод и экономия бумаги — используйте CSS и/или PDF.

1. Самый простой способ — JavaScript: window.print()

Код кнопки:

Печать

Альтернативная версия как ссылка:

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

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

• window.print() вызывает системный диалог печати браузера.
• Подходит для быстрой интеграции и простых страниц.
• Печать выполняется точно так, как браузер рендерит текущую страницу — без специальной оптимизации.

Ограничения

• Блоки интерфейса, рекламные баннеры и ненужные элементы могут попасть в печать.
• На широких страницах содержимое может переноситься плохо, что увеличит количество листов.

Совет

Добавьте класс .no-print и скройте его в CSS для печати (пример в разделе про CSS).

2. Простой вариант: ссылка вместо кнопки

Иногда кнопка формы визуально не вписывается в дизайн. Решение — текстовая ссылка с тем же действием. Преимущество — более гибкое оформление и меньше визуального шума.

Пример:

Печать версии для печати

CSS для ссылки:

.print-link {
  color: #0366d6;
  text-decoration: underline;
  cursor: pointer;
}

Выбор между кнопкой и ссылкой — чисто дизайнерский. Главное — доступность: добавьте aria-label, если текст неочевиден.

3. Контролируемая печать через CSS (media=”print”)

Для аккуратной распечатки часто используют отдельную таблицу стилей для печати. Это даёт полный контроль над тем, какие элементы показывать, какой размер шрифта использовать и какие блоки скрывать.

Подключение стилей в страницы:

Пример содержимого print.css:

/* Скрываем структурные элементы, которые не должны печататься */
.header, .sidebar, .ads, .footer { display: none !important; }

/* Оптимизируем основной контейнер для печати */
.main-content { width: auto; margin: 0; padding: 0; }

/* Гарантируем читаемость */
body { color: #000; background: none; }

/* Простое правило для явно маркированного контента */
.print-only { display: block !important; }
.no-print { display: none !important; }

/* Пример изменения размера шрифта и переносов */
@page { size: auto; margin: 15mm; }
*

Альтернатива с visibility

Оригинальный приём использует visibility:hidden у body и visibility:visible для .print, например:

DIV#header, DIV#newflash, DIV#banner { display: none; }
body { visibility: hidden; }
.print { visibility: visible; }

Но visibility оставляет элементы в потоке и может привести к неожиданным пустым областям при печати. Рекомендуется использовать display: none/ block и media=”print”.

Пример HTML-разметки с классом для печати:

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


Боковая панель — не печатать

Плюсы и минусы

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

4. Идеальный контроль: готовый PDF / DOC для печати

Если вам нужен полностью контролируемый результат, подготовьте отдельный PDF-файл (или DOC/ODT), который будет храниться на сервере и открываться для печати.

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

Скачать печатную версию (PDF)

Или: открыть PDF в новой вкладке программно и вызвать печать (ограничено политиками браузера):

Открыть PDF

Преимущества

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

Ограничения

• Требуется дополнительный шаг — генерировать / обновлять PDF при изменениях контента.
• Не всегда удобно для очень частых обновлений.

Как выбрать подходящий метод — краткий алгоритм

flowchart TD
  A[Нужна печать?] --> B{Насколько важен внешний вид}
  B -->|Неважен| C[Использовать window.print'']
  B -->|Важно| D{Должна ли печатная версия быть статичной}
  D -->|Да| E[Генерировать PDF и ссылку]
  D -->|Нет| F[Создать print.css с media=print]
  C --> G[Добавить .no-print для скрытия рекламы]
  F --> G
  E --> H[Обновлять PDF при изменениях]

Контрпримеры: когда методы не сработают

• Сложные SPA (single-page applications) с динамической подгрузкой контента: window.print() может не дождаться отрисовки. Решение: явно рендерить контент перед вызовом print или генерировать PDF на сервере.
• Контент, защищённый скриптами или контент внутри canvas: CSS не спасёт изображение, встроенное в canvas; нужно экспортировать изображение и вставить его в печатную версию.
• Печать из мобильных браузеров может отличаться: некоторые мобильные браузеры ограничивают возможности стилизации при печати.

Практическая методика внедрения (мини‑методология)

1. Оцените тип контента: статичный текст или динамический интерфейс.
2. Выберите стратегию (JS / CSS / PDF) по алгоритму выше.
3. Реализуйте базовую кнопку/ссылку с понятным текстом и aria-label.
4. Напишите print.css и протестируйте в 3 браузерах (Chrome, Firefox, Safari).
5. Проведите тесты на печать в PDF и на бумаге (минимум 2 формата принтера: A4/Letter).
6. Автоматизируйте генерацию PDF для часто обновляемых страниц (опционально).

Проверочный чеклист для команды

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

• Реализована кнопка или ссылка с window.print() или ссылка на PDF.
• Подключен print.css с media=”print” или PDF-версия.
• Скрыты элементы с классом .no-print.
• Добавлены aria-label и tabindex при необходимости.
• Протестировано в Chrome, Firefox, Safari на десктопе и мобильных браузерах.

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

• Проверены заголовки и отступы в печатной версии.
• Удалены или помечены рекламные блоки как .no-print.
• Обновлён PDF при изменениях основного текста (если используется PDF).

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

• При нажатии на кнопку открывается диалог печати или загружается PDF.
• Печатная версия не содержит рекламных блоков и лишней навигации.
• Основной контент помещается и читается без горизонтальной прокрутки (для типичного принтера A4/Letter).
• Страница корректно печатается в трёх основных браузерах.

1‑строчный глоссарий

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

Риски и смягчения

• Риск: динамический контент не успевает отрисоваться до вызова window.print(). Смягчение: дождаться событий рендера или использовать серверную генерацию PDF.
• Риск: рекламные скрипты вставляют блоки в печатную страницу. Смягчение: использовать .no-print и жесткие селекторы для блокировки.

Заключение

Есть четыре рабочих уровня решения задачи печати: от «нажали и распечатали» через window.print() до генерации профессионально оформленного PDF. Для простоты и скорости выбирайте JS‑решение; для контроля макета — media=”print”; для идеальной печати и официальный документооборот — PDF. Тестируйте результаты в реальных браузерах и поддерживайте печатные стили при изменениях дизайна.

И наконец — не забывайте про доступность: делайте кнопки видимыми, понятными и снабжайте aria‑подсказками.

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

Image Credit: Sundeip Arora