Печать определенного блока страницы
Нет ничего сложного в том, чтобы распечатать всю страницу так как нам это надо. Просто подключаем стили для печати, в которых убираем все лишнее и вперед. А что делать если на странице одновременно присутствуют две кнопочки: одна печатает всю страницу, а вторая - какой-то выбранный блок?
Решение достаточно простое.
Допустим, у нас есть две ссылки: “Print block” и “Print page”. Заранее скажу что будет использоваться jquery, т.к. на сегодняшний день я себе не представляю нормального проекта без его участия.
При нажатии на “Print block” срабатывает функция:
1 2 3 4 5 6 7 8 9 10 11 | function printBlock(printLink) { productDesc = $(printLink).parents('#blockId').html();//забираем контент нужного нам блока (в моем случае ссылка на печать находится внути его) $('body').addClass('printSelected');//добавляем класс к body $('body').append('<div class="printSelection">' + productDesc + '</div>');//создаем новый блок внутри body window.print();//печатаем window.setTimeout(pageCleaner, 0); //очищаем нашу страницу от "мусора" return false;//баним переход по ссылке, чтобы она не пыталась перейти по адресу, указанному внутри аттрибута href } |
Функция pageCleaner() вызывается через setTimeout затем, чтобы поставить ее вызов в очередь. Чтобы распечатка не произошла после очистки и вместо нужного блока распечаталась вся страница.
Вот сама очистка:
1 2 3 4 5 | function pageCleaner() { $('body').removeClass('printSelected');//убираем класс у body $('.printSelection').remove();//убиваем наш только что созданный блок для печати } |
Воть тяк. Конечно, можете спросить, почему бы не поставить очистку на нажатие ссылки “Print page”. Да потому что пользователь может возжелать распечатать страницу через “Файл” -> “Печать”
Ну и не забыть прописать в файл стилей для печати следующее:
1 2 3 | .printSelected div {display: none } /* скрываем весь контент на странице */ .printSelected div.printSelection {display: block; } /* делаем видимым только тот блок, который подготовлен для печати */ .printSelected div.printSelection div {display: block; } /* показываем всех его потомков, которые были скрыты первой строкой */ |
Вот так. Просто, но тем не менее работает :)
Как повесить вызов функции printBlock() на нужную ссылку, расписывать, надеюсь, не надо? :)
