Как распечатать контент в Joomla понятно - выводим в настройках кнопку Печать и печатаем. Для печати используется файл component.php в шаблоне.
Но, иногда, есть необходимость распечатать только часть страницы, например, какой-нибудь блок div..
В данном случае добавим возможность печати тэга pre.
Ссылка для печати:
<a title="" href="#" class="aprint"><i class="fa fa-print" aria-hidden="true"></i> Печать</a>
Javascript для печати блока:
$(".aprint").click(function(){ $("body").addClass("printSelected"); $("body").append('<div class="printSelection"></div>'); //создаем блок для печати $(".item-page pre").clone().appendTo(".printSelection"); $(".item-page h1").clone().insertBefore(".printSelection pre"); window.print(); //window.setTimeout(pageCleaner, 0); $("body").removeClass("printSelected"); $(".printSelection").remove(); });
И CSS стиль:
<style> @media print { .printSelected > * {display: none; } .printSelected >.printSelection { display: block; padding:25px;} } .printSelection{display:none;} </style>
Логика такая..
Сначала добавляем ссылку для печати, потом назначаем ей событие click.
При клике на кнопку печати будет добавлен селектор класса для тэга body и div для хранения данных для печати, после печати он будет удален.
В добавленных стилях, мы задаем то, что все содержание страницы для печати будет скрыто, кроме блока в котором будет храниться данные для печати.
На экране блок с данными для печати будет скрыт.