Бесплатный вебинар
«как найти любимую работу»
Подарки на 150 000 ₽ за участие
Живой эфир
Записи не будет!
00:00:00:00
дн.ч.мин.сек.

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

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

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

HTML
Скопировать код
<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>
Кинга Идем в IT: пошаговый план для смены профессии

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

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

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

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

CSS
Скопировать код
@media print {
  body * {
    display: none; 
  }
  #printableArea, #printableArea * {
    display: block;
  }
}
Подробнее об этом расскажет наш спикер на видео
skypro youtube speaker

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

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

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

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

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

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

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

HTML
Скопировать код
<link rel="stylesheet" href="print.css" media="print">

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

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

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

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

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

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

Markdown
Скопировать код
🖨️ Нажата кнопка 🖨️

До: [🖼️ Полная галерея]
После: [🖼️ Избранные картины]
HTML
Скопировать код
<button onclick="printContent('artwork')">Напечатать произведение искусства</button>
JS
Скопировать код
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
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой тег используется для размещения контента, который будет напечатан?
1 / 5