Сезон заметок о веб-разработке.
Очень полезное и тяжело находимое: способ вывести на печать только один блок с веб-страницы.
В моем случае просили вывести на печать по кнопке карту.
Базовый источник информации: http://blog.ircit.ru/post/javascript-pechat-otdelnogo-bloka-stranitsy/ В нем содержится подробное объяснение и несколько полезных дополнений.
В сухом остатке для себя.
1. Кнопка "Распечатать"
<a id="printBlock" href="#">Распечатать</a>
2. Стили для @media print
<style>
@media print
{
.printSelected>* {display: none; }
.printSelected>.printSelection { display: block !important; }
}
.printSelection{display:none;}
</style>
Очень полезное и тяжело находимое: способ вывести на печать только один блок с веб-страницы.
В моем случае просили вывести на печать по кнопке карту.
Базовый источник информации: http://blog.ircit.ru/post/javascript-pechat-otdelnogo-bloka-stranitsy/ В нем содержится подробное объяснение и несколько полезных дополнений.
В сухом остатке для себя.
1. Кнопка "Распечатать"
<a id="printBlock" href="#">Распечатать</a>
2. Стили для @media print
<style>
@media print
{
.printSelected>* {display: none; }
.printSelected>.printSelection { display: block !important; }
}
.printSelection{display:none;}
</style>
3. Скрипт:
<script type="text/javascript">
$(function() {
$('#printBlock').click(function(){
$('body').addClass('printSelected'); //добавляем класс <body>
$('body').append("<div class='printSelection'></div>"); //создаем "призрачный" блок для печати
$('.item-page img').clone().appendTo('.printSelection'); // вставляем в блок то, что нужно вывести на печать (в данном случае лишь картинку) .item-page - класс родительского блока моей картинки
$("<p><img src='/images/print-logo.png'></p>").insertBefore('.printSelection img'); // в шаблон печати добавляем сверху логотип компании
window.print(); // выводи на печать
});
});
</script>
4. Собственно все. При нажатии на ссылку должен открываться диалог печати страницы с ее предпросмотром.
