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

 

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

Oleg31.05.2024 / 13:07:49
было бы неплохо добавить возможность подключения ...
brochrane30.11.2023 / 14:37:28
I would love to purchase this plugin but I am una...
MUST-STYLE13.09.2022 / 16:55:13
WORKBox CRM ver.1.14 → Исправлена ошибка расчета ...
MUST-STYLE22.04.2022 / 17:00:29
WORKBox CRM ver.1.13 → Добавлена статистика сдело...
MUST-STYLE22.04.2022 / 16:58:10
WORKBox CRM ver.1.12 → В настройки добавлена возм...
Разработка имиджевых сайтов, разработка фирменного стиля, брендбук