Печать определенного HTML-содержимого кнопкой: решение

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

Чтобы быстро напечатать определённую часть веб-страницы, разместите контент в теге div с уникальным id, например, id="printableArea". Затем примените простую функцию JavaScript для вызова диалогового окна печати, ограниченного этим фрагментом:

<button onclick="printContent('printableArea')">Печатать раздел</button>
<div id="printableArea">Текст для печати</div>

<script>
function printContent(el){
  var printZone = document.getElementById(el).innerHTML;
  var printWindow = window.open('', '', 'left=0,top=0,width=800,height=900,status=0');
  printWindow.document.write('<title>Печать содержимого</title>');
  printWindow.document.write('<style>@media print { .no-print { display: none; } }</style>'); // Скрываем элементы, которые не предназначены для печати
  printWindow.document.write(printZone);
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
  printWindow.close();
}
</script>

Профессиональный совет: использование контролов для печати

Сочетание клавиш Ctrl+P может дать непредсказуемый результат. Чаще всего нас интересует печать определённого участка страницы. Вот как это можно реализовать:

Управление видимостью посредством CSS-медиазапросов

Для корректировки видимости элементов при печати прекрасно подходят медиазапросы в CSS. С помощью них можно предназначить для печати только необходимую часть контента:

@media print {
  body * {
    display: none; 
  }
  #printableArea, #printableArea * {
    display: block;
  }
}

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

Печать динамически изменяемого содержимого

Если требуется напечатать динамически меняющийся div, это не проблема. JavaScript достаточно гибок. Мы можем адаптировать функцию printContent, чтобы она обрабатывала не один, а несколько элементов.

function printContent(...ids) {
  const content = ids.map(id => document.getElementById(id).innerHTML).join('');
  // Дальше следует реализация процесса печати...
}

Теперь функцию printContent можно вызвать с несколькими идентификаторами для печати различных секций.

Уверенный профессиональный уровень печати!

Создание специфических CSS-стилей для печати

Разумным решением будет создание отдельного файла стилей для настройки печати. Это упростит обслуживание и улучшит наглядность стилевого кода:

<link rel="stylesheet" href="print.css" media="print">

Динамическое изменение видимости с помощью JavaScript

JavaScript позволяет динамически изменять видимость элементов:

document.body.classList.add('print-mode'); // Устанавливаем режим печати
window.print();
document.body.classList.remove('print-mode'); // Возвращаем исходное состояние.

Важно, чтобы CSS-класс .print-mode корректно настраивал видимость элементов.

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

Ваша задача — выбрать для печати только те части "галереи" в вашем веб-приложении, которые вам нужны, скрыв всё остальное:

🖨️ Нажата кнопка 🖨️

До: [🖼️ Полная галерея]
После: [🖼️ Избранные картины]

<button onclick="printContent('artwork')">Напечатать произведение искусства</button>

function printContent(elementId) {
  let printContent = document.getElementById(elementId).innerHTML;
  let originalContent = document.body.innerHTML;

  document.body.innerHTML = printContent;
  window.print();
  document.body.innerHTML = originalContent;
}

Вы в полной мере контролируете, что останется на странице и что появится на странице в распечатанной версии.

Завершение

Максимальное упрощение интерактивного взаимодействия

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

Осторожно обходим различия между браузерами

Обработка диалогов печати в разных браузерах может существенно различаться. В связи с этим важно зорганить грациозное ухудшение функциональности в разных браузерах.

Избегаем мерцания и сдвигов на странице

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

Оставляем страницу стабильной

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

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

1. Метод окна: print() – Веб API | MDN
2. Метод print() окна – W3Schools
3. Печать в Интернете | CSS-Tricks
4. Оформление для печати с помощью CSS – A List Apart
5. Как настроить таблицу стилей для печати — Smashing Magazine
6. Как отключить настройки печати в браузере (заголовки, подвалы, поля) со страницы? – Stack Overflow
7. @media – CSS: каскадные таблицы стилей | MDN