Спочатку потрібно вибрати потрібний div записати в змінну його вміст (адже саме вміст ми будемо потім друкувати):
Код: var html_to_print = $ ( 'div # to_print'). Html ()
Тепер давайте задумаємося, як можна в принципі роздрукувати що-небудь на JS? Саме просто рішення - скористатися функцією print. Але ця функція є тільки у об'єкта window. отже нам потрібно створити в тлі цей елемент і у нього вже викликати функцію print.
Отже, створимо iframe (він буде контейнером нашого нового window):
Код: var iframe = $ ( ''); // створюємо iframe в змінну
$ ( 'Body'). Append (iframe); // додаємо цю змінну з iframe в наш body (в самий кінець)
Тепер отримаємо об'єкти document і window новоствореного iFrame:
Код: var doc = $ ( '# print_frame') # 91; 0 # 93; .contentDocument || $ ( '# Print_frame') # 91; 0 # 93; .contentWindow.document;
var win = $ ( '# print_frame') # 91; 0 # 93; .contentWindow || $ ( '# Print_frame') # 91; 0 # 93 ;;
Об'єкт document (в змінної doc) нам потрібен для того, щоб вивести в нього дані для друку, а window (в змінної win) - для того, щоб викликати саму печатку.
Тепер виведемо в iframe дані для друку (можна, до речі, додати туди ще й стиль спеціальний для друку).
І викличемо друк:
Діалог друку відкривається, при цьому ми виводимо на друк тільки вміст певного div, і не виводимо користувачеві зайвих спливаючих вікон.
Прикрашаємо отримані результати
Давайте приберемо створений iFrame, щоб не збільшувати вагу сторінки в оперативці (і раптом людина ще раз натисне на кнопку «друк»):
2) Додамо до друкується вмісту ще й таблицю стилів на CSS:
Спочатку зазначимо в змінної стилі (або можна прямо вказати link на зовнішній CSS файл):
Код: var printing_css = '';
Зверніть увагу, на фішку з media = print. Це означає, що стилі виконуватися тільки на принтері (це більше фішка, в нашому випадку, ніж реальний плюс).
Далі за кодом: кожен парний tr буде сірого кольору. Можна вказати більше стилів, або зовнішній файл CSS.
І додамо цю змінну до даних, які засовуємо в друкований iframe. Для цього трохи змінимо значення в описаній вище змінної html_to_print:
Код: var html_to_print = printing_css + $ ( '# to_print'). Html ();
Звичайно, ваша реалізація може бути інший, сподіваюся, що ідею реалізації вдалося передати ..