Вітання. Сьогодні постараємося вирішити задачу, яка постає перед усіма, хто намагається щось роздрукувати на сайті, а саме jquery роздрукувати div.
Завдання: jquery роздрукувати div
Рішення: jquery роздрукувати div
Спочатку потрібно вибрати потрібний div за допомогою jQuery і записати в змінну його вміст (адже саме вміст ми будемо потім друкувати):
Готово. Тепер давайте задумаємося, як можна в принципі роздрукувати що-небудь на JS? Саме просто рішення (без застосування будь-яких там PDF) - скористатися функцією print. Але ця функція є тільки у об'єкта window, отже нам потрібно створити в тлі цей елемент і у нього вже викликати функцію print.
Отже, створимо iframe (він буде контейнером нашого нового window):
Ну а тепер отримаємо об'єкти document і window новоствореного iFrame:
Об'єкт document (в змінної doc) нам потрібен для того, щоб вивести в нього дані для друку, а window (в змінної win) - для того, щоб викликати саму печатку.
Тепер виведемо в iframe дані для друку (можна, до речі, додати туди ще й стиль спеціальний для друку, див. На jsFiddle в кінці статті).
І викличемо друк:
Готово. Діалог друку відкривається, при цьому ми виводимо на друк тільки вміст певного div (jQuery роздрукувати div), і не виводимо користувачеві зайвих спливаючих вікон.
Прикрашаємо отримані результати: jQuery роздрукувати div
Що можна зробити для поліпшення того, що у нас вийшло?
1) Давайте приберемо створений iFrame, щоб не збільшувати вагу сторінки в оперативці (і раптом людина ще раз натисне на кнопку «друк»):
2) Давайте додамо до друкується вмісту ще й таблицю стилів на CSS:
Спочатку зазначимо в змінної стилі (або можна прямо вказати link на зовнішній CSS файл):
Зверніть увагу, на фішку з media = print. Це означає, що стилі виконуватися тільки на принтері (це більше фішка, в нашому випадку, ніж реальний плюс).
Далі за кодом: кожен парний tr буде сірого кольору. Можна вказати більше стилів, або зовнішній файл CSS.
І додамо цю змінну до даних, які засовуємо в друкований iframe. Для цього трохи змінимо значення в описаній вище змінної html_to_print:
Звичайно, ваша реалізація jquery роздрукувати div може бути інший, сподіваюся, що ідею реалізації вдалося передати.
Подивитися на робочий демо описаного вище коду jquery роздрукувати div можна на jsFiddle. або трохи нижче:
Ну, а якщо у вас зламалася машина, або просто лінь їхати за кермом - служба таксі дешево москва допоможе вам доїхати до пункту призначення. Грамотно водії, якісний сервіс, не дорого.
- Як визначити на jquery select текст ...
- Робимо нескінченний слайдер jquery ...
- Плавне прокручування сторінки на ...
