Отдаем на печать конкретный div

Отдаем на печать конкретный div

02016-01-1337682Денис Абдуллин

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

Так выглядит код кнопки для печати всей страницы:

Код
<a href="#" onclick="window.print()">Распечатать</a>

Теперь перейдем непосредственно к печати DIV-элемента. Существует разные способы. Например, есть способ прописывать отдельные CSS-стили для версий сайта, отдельная версия CSS-файла для печати. Согласитесь, звучит как минимум сложно. В данной же версии мы просто создаем новое окно, в котором присутствует выбранный нами элемент, и при его загрузке запускаем печать страницы. Все эти действия происходят менее чем за секунду, поэтому пользователь сразу увидит окно для распечатки с предпросмотром (в зависимости от браузера):

1. Подключаем библиотеку jQuery (вставить следующий код между <head> и </head>). Если ваш сайт на uCoz, этого не требуется, библиотека уже подключена.

Код
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script>

2. Вставьте код в любом месте на странице:

Код
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
</script>

3. Содержимое данного DIV будем выводить на печать:

Код
<div id="mydiv">Tekst</div>

4. Код кнопки для печати. Вставить между <body> и </body>, где хотите видеть кнопку:

Код
<input type="button" value="Print Div" onclick="PrintElem('#mydiv')" />

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


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (2)
Жека Знахарев 2016-01-15 в 08:11Спам
очень полезный материал, спасибо!
2
Сергей Александрович 2016-01-16 в 11:53
Спасибо. Рад стараться для вас.
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.