7 февраля 2020 JavaScript

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

Вызвать печать на странице

Печать документа на странице можно вызвать JavaScript функцией print().

Пример:

Печать

Оформление страницы печати

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

@media print {
        .adv {display:none;}
}

Печать отдельного блока со страницы

Код HTML

Заголовок

Текст

Печать

Код JavaScript

function callPrint() {
        var printCSS = '';
        var printTitle = document.getElementById('print-title').innerHTML;
        var printImg = document.getElementById('print-img').innerHTML;
        var printText = document.getElementById('print-text').innerHTML;
        var windowPrint = window.open('','','left=50,top=50,width=800,height=640,toolbar=0,scrollbars=1,status=0');
        windowPrint.document.write(printCSS);
        windowPrint.document.write(printTitle);
        windowPrint.document.write(printImg);
        windowPrint.document.write(printText);
        windowPrint.document.close();
        windowPrint.focus();
        windowPrint.print();
        windowPrint.close();
}

При нажатии кнопки «Печать» происходит вызов функции callPrint(). Если будете модернизировать код, то тут функции можно передавать к примеру ID блока, который нужно распечатать. В примере мы ничего не передаем и не используем библиотеку jQuery, хотя при более сложной вариации с ней будет проще.

Далее вызывается всплывающее окно, в которое добавляются наши блоки, после чего окно закрывается и открывается окно браузера для печати. Все это делается практически незаметно. И для пользователя это будет выглядеть так, как будто окно печати открылось сразу.