Печать всплывающего окна в div по ID: решение ошибки кнопки

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

Для печати конкретного раздела вашего сайта с помощью JavaScript рекомендуется использовать следующий код:

JS
Скопировать код
function printSection(sectionId) {
  var sectionContent = document.getElementById(sectionId).innerHTML;
  var popupWin = window.open('', '_blank', 'width=600,height=600');

  popupWin.document.open();
  popupWin.document.write('<html><body onload="window.print()">' + sectionContent + '</html>');
  popupWin.document.close();
}

Чтобы активировать функцию печати, вызовите printSection('idOfSectionToPrint'), где ID элемента обозначает идентификатор секции, которую вы хотите распечатать. В итоге будет открыто новое окно, после чего автоматически появится диалоговое окно печати.

Кинга Идем в IT: пошаговый план для смены профессии

Расширенный режим: печать со всеми нюансами

Рассмотрим некоторые дополнительные опции, позволяющие обогатить основной функционал полезными возможностями.

Оформление печатной версии с помощью CSS-медиа-запросов

Для того чтобы печатная версия соответствовала стилю оформления вашего сайта и выглядела аккуратно, используйте для определения направления печати @media print:

CSS
Скопировать код
@media print {
  body * {
    visibility: hidden;
  }
  #idOfSectionToPrint, #idOfSectionToPrint * {
    visibility: visible;
  }
  #idOfSectionToPrint {
    position: absolute;
    left: 0;
    top: 0;
  }
}
Подробнее об этом расскажет наш спикер на видео
skypro youtube speaker

Упрощаем процесс печати с помощью jQuery

Если ваш проект базируется на jQuery, благодаря этой библиотеке код функции печати может быть значительно упрощен:

JS
Скопировать код
$('#printButton').click(function() {
  var content = $('#idOfSectionToPrint').html();
  var win = window.open('', 'printwindow');
  
  win.document.write('<html><head><title>Print</title></head><body>' + content + '</body></html>');
  win.document.close();
  win.print();
});

Динамический контент и совместимость с браузерами

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

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

Представьте ситуацию: на вашем сайте размещена галерея четырех картин:

[Картина 1, Картина 2, Картина 3, Картина 4]

Ваша задача — распечатать лишь Картину 2:

🖨️: [       , Картина 2,        ,         ]

Во внешнем виде итоговая брошюра будет эстетична и будет акцентировать внимание только на выбранной картине:

✨ [       , 🎨 Картина 2 🎨,        ,         ] ✨

Таким образом, пользователи вашего сайта смогут распечатать именно то, что им нужно.

Основы печати

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

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

HTML
Скопировать код
<button onclick="printSection('idOfSectionToPrint')">Печать раздела</button>

Работа с составными структурами

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

Работа с iframe

Даже при условии, что контент подключен через iframe, его можно распечатать следующим образом:

JS
Скопировать код
function printIframeSection(iframeId, sectionId) {
  var iframe = document.getElementById(iframeId);
  var content = iframe.contentWindow.document.getElementById(sectionId).innerHTML;
  var popupWin = window.open('', '_blank', 'width=600,height=600');
  popupWin.document.write('<html><body onload="window.print()">' + content + '</body></html>');
  
  popupWin.document.close();
}

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

  1. Метод Window: print() – Web API | MDN — Информация о вызове окна печати с помощью JavaScript.
  2. JavaScript – Печать содержимого DIV – Stack Overflow — Ответы сообщества на вопросы о способах печати конкретных разделов веб-страниц.
  3. Изменение содержимого документа — Подробное руководство по изменению документа с учетом его последующей печати.
  4. CSS-дизайн: Подготовка к печати – A List Apart — Продвинутые техники CSS для создания печатной версии веб-страницы.
  5. web.dev — Универсальный ресурс, на котором собраны материалы на все темы веб-разработки, включая функции печати.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой JavaScript код позволяет распечатать конкретный раздел веб-сайта по его ID?
1 / 5