Печать определенного 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