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

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

13.01.201617212MSerega

В этом материале мы поделимся с вами кодом, который дает возможность отправлять на печать конкретный 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')" />

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




Сохраните в социальную сеть
Комментарии (2)
очень полезный материал, спасибо!
2
Спасибо. Рад стараться для вас.
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт