Я пытаюсь распечатать определенную часть своего приложения.
Приложение имеет список пользователей, отображая их имя и фамилию. Когда я нажимаю пользователя, я получаю всплывающее окно с более подробной информацией о них.
Как я пошел бы о печати просто всплывающего окна для пользователя, которого я нажал? Всплывающее окно похоже на это:
<div id="user<?=$user->id;?>" class="popup">
<div class="details">
User details...
</div>
<a href="#print">Print</a>
</div>
Кнопка печати еще не работает все же.
Я записал крошечный модуль JavaScript, названный PrintElements для того, чтобы динамично распечатать части веб-страницы.
Это работает путем итерации через выбранные элементы узла, и для каждого узла, это пересекает дерево DOM до элемента ТЕЛА. На каждом уровне, включая начальный (который является распечатанным будущим образом node’s уровнем), он присоединяет класс (pe-preserve-print
) маркера к текущему узлу. Затем присоединяют другой класс (pe-no-print
) маркера ко всем одноуровневым элементам текущего узла, но только если нет никакого pe-preserve-print
класс на них. Как третье действие, это также присоединяет другой класс к сохраненным элементам предка pe-preserve-ancestor
.
А очень простая дополнительная CSS только для печати скроет и покажет соответствующие элементы. Некоторые преимущества этого подхода - то, что все стили сохраняются, это не открывает новое окно, нет никакой потребности переместить много элементов DOM, и обычно это является неразрушающим с Вашим оригиналом документа.
Видят демонстрация или читают похожую статью для получения дальнейшей информации .