Распечатайте определенную часть веб-страницы

Я пытаюсь распечатать определенную часть своего приложения.

Приложение имеет список пользователей, отображая их имя и фамилию. Когда я нажимаю пользователя, я получаю всплывающее окно с более подробной информацией о них.

Как я пошел бы о печати просто всплывающего окна для пользователя, которого я нажал? Всплывающее окно похоже на это:

 <div id="user<?=$user->id;?>" class="popup">
      <div class="details">
           User details...
      </div>
      <a href="#print">Print</a>
 </div>

Кнопка печати еще не работает все же.

59
задан 21 October 2012 в 14:44

1 ответ

Я записал крошечный модуль JavaScript, названный PrintElements для того, чтобы динамично распечатать части веб-страницы.

Это работает путем итерации через выбранные элементы узла, и для каждого узла, это пересекает дерево DOM до элемента ТЕЛА. На каждом уровне, включая начальный (который является распечатанным будущим образом node’s уровнем), он присоединяет класс (pe-preserve-print) маркера к текущему узлу. Затем присоединяют другой класс (pe-no-print) маркера ко всем одноуровневым элементам текущего узла, но только если нет никакого pe-preserve-print класс на них. Как третье действие, это также присоединяет другой класс к сохраненным элементам предка pe-preserve-ancestor.

А очень простая дополнительная CSS только для печати скроет и покажет соответствующие элементы. Некоторые преимущества этого подхода - то, что все стили сохраняются, это не открывает новое окно, нет никакой потребности переместить много элементов DOM, и обычно это является неразрушающим с Вашим оригиналом документа.

Видят демонстрация или читают похожую статью для получения дальнейшей информации .

0
ответ дан 1 November 2019 в 11:22

Другие вопросы по тегам:

Похожие вопросы: