Печать определенного блока страницы

Дата: 13th Окт,2009 Автор: admin

Нет ничего сложного в том, чтобы распечатать всю страницу так как нам это надо. Просто подключаем стили для печати, в которых убираем все лишнее и вперед. А что делать если на странице одновременно присутствуют две кнопочки: одна печатает всю страницу, а вторая — какой-то выбранный блок?

Решение достаточно простое.
Допустим, у нас есть две ссылки: «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() на нужную ссылку, расписывать, надеюсь, не надо? :)

Опубликовано в Print styles

37 проверенных PHP, Perl, и JavaScript регулярных выражений

Дата: 24th Сен,2009 Автор: admin

37 Tested PHP, Perl, and JavaScript Regular Expressions

Опубликовано в Регулярки

10 правил фронтенд кодинга

Дата: 25th Июн,2009 Автор: admin

10 Rules of Front End Coding

Опубликовано в Разное

Селекторы jQuery и примеры использования

Дата: 16th Апр,2009 Автор: admin

jQuery selectors and attribute selectors reference and examples

Опубликовано в jQuery

Очистка CSS

Дата: 24th Дек,2008 Автор: admin

http://cleancss.com/ — неплохой сервис для очистки вашего CSS кода. Убьет лишний пробелы, напишет правильно цвет и т.д.


Страница сгенерирована за 0.042166 секунд