Печать страницы с помощью Java Script. Вывод на печать с определенного html тега

Сегодня предлагаю рассмотреть простую и более сложную функцию, которая позволит пользователям распечатать страничку вашего сайта или ее определенную часть.

Если первый вариант реализовать очень просто, то со вторым придется повозиться. Итак, чтобы распечатать любую страницу вашего сайта мы будем использовать Java Script функцию print(). Пример кода:

<a href="#" onClick="window.print()">Распечатать всю страницу</a>

Если вы разместите этот код на своем сайте, то при нажатии на ссылку откроется окно печати страницы. Запуск действия происходит за счет: onClick="window.print()". Это событие можно установить не только на ссылку, но и любой другой тег, button или div.

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

<script>
$(function(){
$('.myprint').click(function(){
var html_to_print=$('.to_print').html();
var iframe=$('<iframe id="print_frame">');
$('body').append(iframe);
var doc = $('#print_frame')[0].contentDocument || $('#print_frame')[0].contentWindow.document;
var win = $('#print_frame')[0].contentWindow || $('#print_frame')[0];
doc.getElementsByTagName('body')[0].innerHTML=html_to_print;
win.print();
$('iframe').remove();
});
});
</script>
<style>#print_frame{display: none;}</style>

Если рассмотреть код кратко, то при клике на элемент с классом myprint будет выводиться на печать только область с классом to_print. Полный пример и принцип действия вы можете скачать по ссылкам выше. В них вы найдете рабочий код и html элементы за счет которых и осуществляется печать всего документа или только его определенной части.

Данный скрипт легко адаптировать под ваши цели, например, чтобы распечатать готовую квитанцию на оплату или определенную картинку, например, купон с акцией или скидкой.