Печать содержимого DIV в веб-странице: методы и советы

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

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

Для печати содержимого блока DIV воспользуйтесь приведенным ниже подходом: создайте всплывающее окно с необходимым содержимым и активируйте встроенную функцию печати браузера. Вот пример кода, реализующего этот процесс:

Скопировать код

function printDiv(divId) {
    var divContent = document.getElementById(divId).innerHTML; 
    var printWin = window.open('', '_blank', 'width=800,height=600'); 
    printWin.document.write(`<html><head><title>Печать содержимого</title></head><body>${divContent}</body></html>`);
    printWin.document.close(); 
    printWin.addEventListener('load', function() {
        printWin.print(); 
        printWin.close(); 
    }, true);
}

Печать можно запустить командой printDiv('yourDivId'), где 'yourDivId' — это идентификатор блока DIV. Скрипт автоматически загрузит содержимое и запустит процесс печати.

Сложные задачи? Продвинутые решения!

Сложность динамического содержимого

В случае, когда внутри DIV-блока размещаются формы или сложные JavaScript элементы, примените дополнительные техники. Клонирование DOM-поддерева позволит сохранить всю интерактивность до момента печати:

Скопировать код

function printDivWithDynamicContent(divId) {
    const printWin = window.open('', '_blank', 'width=800,height=600');
    const originalDiv = document.getElementById(divId);
    const cloneDiv = originalDiv.cloneNode(true);
    printWin.document.body.appendChild(cloneDiv);
    printWin.document.close();
    printWin.addEventListener('load', function() {
        printWin.print();
        printWin.close();
    }, true);
}

Внешний вид — наше всё: Стили для печати

Правильное форматирование очень важно. При печати могут исчезать CSS-стили. В этом случае используйте правило @media print для сохранения стилей или добавьте инлайн-стили при необходимости:

Скопировать код

function addInlinePrintStyles(divContent) {
    var inlineStyles = '<style>' +
                       '  body { font-family: Arial, sans-serif; color: #333; }' +
                       '</style>';
    return inlineStyles + divContent;
}

function printDiv(divId) {
    var divContent = document.getElementById(divId).innerHTML;
    divContent = addInlinePrintStyles(divContent);
    // ... остальной код функции не меняется
}

Важно учесть: Изображения и фреймы

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

Скопировать код

function printDivWithImages(divId) {
    // ... код, размещенный выше ...
    printWin.addEventListener('load', function() {
        var allImagesLoaded = Array.from(printWin.document.images).every((img) => img.complete);
        if (allImagesLoaded) {
            printWin.print();
            printWin.close(); 
        } else {
            // Обработка ситуации, когда изображения ещё не загружены
        }
    }, true);
}

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

Представьте ваш DIV-блок в центре восприятия, окружённый шумом большого города. Ваш DIV — это заметный объект в центре внимания:

HTML

Скопировать код

<div id="penthouse-suite">
  <!-- Привлекающее внимание содержимое -->
</div>

Команда печати аналогична прожектору, который освещает исключительно ваш объект, оставляя остальные объекты города в темноте. Таким образом, ваше содержимое оказывается в центре внимания:

Markdown

Скопировать код

Контур кредитного города затемнён (💭), весь свет сосредоточен на объекте:
[🌃💭, 🌆💭, 🏙️💭, ... 🌃💭, 🎥️🌟 (содержимое в свете прожекторов) ]

Браузеры? Да, они разные!

Совместимость с различными браузерами

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

Особенности Chrome

Уделите особое внимание браузеру Chrome, проверив, не блокирует ли его система блокировки всплывающих окон вашу функцию печати.

Печать форм, а не только текста

Если DIV включает формы, убедитесь, что значения этих форм корректно выводятся при печати. Для этого используйте следующий метод:

Скопировать код

function copyFormValues(originalForm, clonedForm) {
    var originalInputs = originalForm.querySelectorAll('input, select, textarea');
    var clonedInputs = clonedForm.querySelectorAll('input, select, textarea');
    originalInputs.forEach(function(originalInput, index) {
        var clonedInput = clonedInputs[index];
        clonedInput.value = originalInput.value; 
    });
}

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

Window: print() method – Web APIs | MDN — страница документации MDN: подробности использования window.print().
The Printliminator – CSS-Tricks — описание инструмента управления печатью содержимого.
javascript – Print the contents of a DIV – Stack Overflow — тема, посвященная печати содержимого DIV-блока, на Stack Overflow.
How to Create Printer-friendly Pages with CSS — SitePoint — руководство по созданию страниц, оптимизированных для печати.
html2canvas – Screenshots with JavaScript — инструмент для создания скриншотов с помощью JavaScript.
Print.js – Javascript library for HTML elements, PDF and image files printing. — библиотека для печати HTML-элементов, PDF и изображений.