В этом материале мы поделимся с вами кодом, который дает возможность отправлять на печать конкретный 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’)” />
Вот так просто мы реализовали функцию печати элемента сайта. На всякий случай отмечу, что браузер будет требовать подтверждение печати, обойти подтверждение нельзя.