Вывод на печать фрагмента 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-STYLE03.04.2021 / 10:58:25
ThumbsUP v.1.4 → Исправлена ошибка, при которой н...
MUST-STYLE28.10.2020 / 11:41:28
ThumbsUP v.1.3 → Исправлена ошибка при загрузки р...
MUST-STYLE28.10.2020 / 11:37:49+2
История обновлений ThumbsUP
MUST-STYLE06.10.2020 / 22:51:36
WORKBox CRM ver.1.8 → Обновлены права доступа пол...
MUST-STYLE27.08.2020 / 08:12:34
WORKBox CRM ver.1.7.5 → На странице регистрации ...
Разработка имиджевых сайтов, разработка фирменного стиля, брендбук