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

Печать только определенного HTML-содержимого при нажатии кнопки пользователем может быть достигнута различными пути. Один из способов — создать скрытый элемент div для хранения желаемого HTML. Для этого div для свойства display должно быть установлено значение «print», а для отображения на экране его значение display должно оставаться «none». Свойства отображения других элементов на странице можно настроить так, чтобы они отображались на экране, но скрывались во время печати. Однако этот метод требует тщательного управления свойствами отображения всех элементов страницы.

Альтернативный подход — создать новую изолированную веб-страницу, содержащую исключительно HTML-содержимое для печати. Эту новую страницу можно динамически загружать в скрытый iframe, когда пользователь нажимает кнопку печати. После полной загрузки iframe можно активировать функцию печати браузера, и встроенный HTML будет напечатан без каких-либо нежелательных элементов страницы. Этот метод обеспечивает большую гибкость и динамический контроль над процессом печати.

Вот пример использования второго подхода:

// Create an invisible iframe to hold the print-only HTML
const printFrame = document.createElement('iframe');
printFrame.style.display = 'none';
document.body.appendChild(printFrame);

// Dynamically load the print-only HTML into the iframe
printFrame.onload = function() {
  // Trigger the browser's print function once the print-only page is loaded
  window.print();
}
printFrame.src = 'print-only.html';

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