Проектирование и разработка WEB-приложений | Вывод на печать блока div

Вывод на печать блока div

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

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

Нам необходимо реализовать печать отдельно взятого блока страницы, заключённого в тег DIV.

Для начала подключим библиотеку jQuery. для чего вставим следующий код между тегами <head> и </head>:

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

Далее вставляем следующий код код в любом месте на странице:

<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('my div');
mywindow.document.write('');
mywindow.document.write(data);
mywindow.document.write('');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
script>

Ту часть страницы, которую будем выводить на печать оформляем в специальном блоке следующим образом:

<div id="mydiv">
   Текст или html код, который хотим распечатать
</div>

Код кнопки для печати размещаем в любом месте между <body> и </body>:

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