Вывод на печать фрагмента HTML страницы, скрипт

10.01.2019

Вывод на печать фрагмента HTML страницы, скрипт

Рубрика: Разработчику

Сталкивались ли вы с вопросом вывода на печать определенного участка вашей HTML страницы, будь то текстовый контент или какая-либо спецификация товара?

Предлагаю ознакомиться с простым и функциональным решением данного вопроса.

Первым делом в шаблоне странице добавьте id, например to_print, к элементу, контент которого вы хотите выводить на печать:

<div id="to_print">Текстовый и графический контент страницы</div>

В подвале шаблона вставляем JavaScript, отвечающий за отправку вашего контента на печать. Кстати, так как контент отправляется через iframe, у него полностью отсутствует оформление, но его можно добавить самостоятельно в переменной printing_css!

$(document).ready(function() { $('#print').click(function(){ var printing_css='<style media="print" type="text/css">*{font-size:14pt;} table{width:100%;}</style>'; var html_to_print=printing_css+$('#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(); }); });

Не забудьте добавить на страницу кнопку вывода на печать, например так:

<a class="btn" href="javascript: ;" id="print" title="Распечатать">Распечатать</a>

Смотрите также:

Давайте познакомимся!

Как вас зовут?
Ваш email:

MS Сommеnts v.1.0 - Developed by MUST-STYLE
 

Последние комментарии

Александр18.07.2019 / 15:35:08
Благодарю, давно искал
Разработка имиджевых сайтов, разработка фирменного стиля, брендбук