Как распечатать отдельный блок?

Как распечатать произвольный блок со страницы? JavaScript, JQuery

Как распечатать отдельный блок?

» » Сообщение:

Сначала нужно выбрать нужный div записать в переменную его содержимое (ведь именно содержимое мы будем потом печатать):

Код: Выделить всё Развернуть
var html_to_print=$('div#to_print').html()

Теперь давайте задумаемся, как можно в принципе распечатать что-либо на JS? Самое просто решение - воспользоваться функцией print. Но эта функция есть только у объекта window, следовательно нам нужно создать в фоне этот элемент и у него уже вызвать функцию print.

Итак, создадим iframe (он будет контейнером нашего нового window):

Код: Выделить всё Развернуть
var iframe=$('<iframe id="print_frame"/>'); // создаем iframe в переменную
$('body').append(iframe); //добавляем эту переменную с iframe в наш body (в самый конец)

Теперь получим объекты document и window новосозданного iFrame:

Код: Выделить всё Развернуть
var doc = $('#print_frame')[0].contentDocument || $('#print_frame')[0].contentWindow.document;
var win = $('#print_frame')[0].contentWindow || $('#print_frame')[0];

Объект document (в переменной doc) нам нужен для того, чтобы вывести в него данные для печати, а window (в переменной win) - для того, чтобы вызвать саму печать.
Теперь выведем в iframe данные для печати (можно, кстати, добавить туда ещё и стиль специальный для печати).

Код: Выделить всё Развернуть
doc.getElementsByTagName('body')[0].innerHTML=html_to_print;

И вызовем печать:

Код: Выделить всё Развернуть
win.print();

Диалог печати открывается, при этом мы выводим на печать только содержимое определенного div, и не выводим пользователю лишних всплывающих окон.

Украшаем полученные результаты

Давайте уберем созданный iFrame, чтобы не увеличивать вес страницы в оперативке (и вдруг человек ещё раз нажмет на кнопку «печать»):

Код: Выделить всё Развернуть
$('iframe').remove();

2) Добавим к печатаемому содержимому ещё и таблицу стилей на CSS:
Сначала укажем в переменной стили (или можно прямо указать link на внешний CSS файл):

Код: Выделить всё Развернуть
var printing_css='<style type="text/css" media="print">tr:nth-child(even) td{background: #CCC;}</style>';

Обратите внимание, на фишку с media=print. Это означает, что стили выполняться только на принтере (это больше фишка, в нашем случае, чем реальный плюс).
Дальше по коду: каждый четный tr будет серого цвета. Можно указать больше стилей, или внешний файл CSS.
И добавим эту переменную к данным, которые засовываем в печатаемый iframe. Для этого немного изменим значение в описанной выше переменной html_to_print:

Код: Выделить всё Развернуть
var html_to_print=printing_css+$('#to_print').html();

Конечно, ваша реализация может быть другой, надеюсь, что идею реализации удалось передать..

☑ Пример: http://demo.likbezz.ru/examples-jquery/print-to-div.html

распечатать, print



Похожие темыКомментарии ПросмотрыПоследнее сообщение
13977Re: Блок "Новостная лента"...
Сообщение от: Admin