Skip to main content

Версия страницы для печати или печать отдельного блока на сайте

Версия страницы для печати или печать отдельного блока на сайте

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

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

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

Пример:

<a href="javascript:(print());" class="button-print">Печать</a>

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

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

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

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

Код HTML

<h1 id="print-title">Заголовок</h1>
<div id="print-img"><img src="img.jpg" /></div>
<div id="print-text">Текст</div>

<a href="#" onclick="javascript:callPrint();">Печать</a>

Код JavaScript

<script>
function callPrint() {
	var printCSS = '<link rel="stylesheet" href="css/print.css" type="text/css" />';
	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();
}
</script>

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

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

Похожие записи
Как конвертировать HTML в Word на JavaScript

Экспортировать HTML-страницу как документ Microsoft Word можно различными способами. Существуют PHP-библиотеки, плагины jQuery. Но когда... Читать далее

Сохранение данных в форме после обновления страницы

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

Как создать таймер обратного отчёта на чистом JavaScript

Вам не обязательно нужен jQuery для добавления таймера обратного отсчета на ваш сайт. Требуется всего... Читать далее

Кастомный виджет переводчик для сайта с флагами

Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню... Читать далее

Графики, диаграммы и многое другое на сайте с помощью Google Charts

Google Charts предоставляет идеальный способ визуализации данных на вашем сайте. От простых линейных диаграмм до... Читать далее

Всплывающее окно при закрытии страницы

Стоп-форма - это всплывающее окно, призывающее к действию, которое открывается через определенное время нахождения пользователя... Читать далее

Комментарий “Версия страницы для печати или печать отдельного блока на сайте”

Добавить комментарий

*

code