Привет. Сегодня постараемся решить задачу, которая встает перед всеми, кто пытается что-то распечатать на сайте, а именно jquery распечатать div.

jQuery распечатать div

Задача: jquery распечатать div

Перед нами есть сгенерированный на PHP или javascript div, содержимое которого нужно распечатать. В jQuery нет встроенного обработчика для печати содержимого. Можно воспользоваться плагином для печати из jQuery или же попробовать решить эту задачу вручную, сделать это совсем просто, смотрите:

Решение: jquery распечатать div

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

var html_to_print=$('div#to_print').html()

Готово. Теперь давайте задумаемся, как можно в принципе распечатать что-либо на JS? Самое просто решение (без применения всяких там PDF) — воспользоваться функцией 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 данные для печати (можно, кстати, добавить туда ещё и стиль специальный для печати, см. на jsFiddle в конце статьи).

doc.getElementsByTagName('body')[0].innerHTML=html_to_print;

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

win.print();

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

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

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

$('iframe').remove();

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

var printing_css='';

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

var html_to_print=printing_css+$('#to_print').html();

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

Посмотреть на рабочий демо описанного выше кода jquery распечатать div можно на jsFiddle, или чуть ниже:

Ну, а если у вас сломалась машина, или просто лень ехать за рулем — служба такси дешево москва поможет вам доехать до пункта назначения. Граммотные водители, качественный сервис, не дорого.