Вывод на печать фрагмента 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:

 

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

MUST-STYLE22.04.2022 / 17:00:29
WORKBox CRM ver.1.13 → Добавлена статистика сдело...
MUST-STYLE22.04.2022 / 16:58:10
WORKBox CRM ver.1.12 → В настройки добавлена возм...
MUST-STYLE23.02.2022 / 12:46:28
Спасибо за предложение. Примем к сведению...
Иван12.02.2022 / 23:05:14+1
Малый бизнес в сфере гостеприимства очень нуждает...
MUST-STYLE06.02.2022 / 16:02:39
WORKBox CRM ver.1.11 → В настройки добавлена возм...
Разработка имиджевых сайтов, разработка фирменного стиля, брендбук