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

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

10.01.2019

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

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

, разработчику, javascript, jquery, script, function, print

Сталкивались ли вы с вопросом вывода на печать определенного участка вашей 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>

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

Oleg31.05.2024 / 13:07:49

было бы неплохо добавить возможность подключения ...

ThumbsUP - Плагин рейтинга для GetSimple CMS

brochrane30.11.2023 / 14:37:28

I would love to purchase this plugin but I am una...

ThumbsUP - Плагин рейтинга для GetSimple CMS

MUST-STYLE13.09.2022 / 16:55:13

WORKBox CRM ver.1.14 → Исправлена ошибка расчета ...

WORKBox - Бесплатная CRM система

MUST-STYLE22.04.2022 / 17:00:29

WORKBox CRM ver.1.13 → Добавлена статистика сдело...

WORKBox - Бесплатная CRM система

MUST-STYLE22.04.2022 / 16:58:10

WORKBox CRM ver.1.12 → В настройки добавлена возм...

WORKBox - Бесплатная CRM система

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