Я пытаюсь напечатать определенную часть моего приложения.
Приложение имеет список пользователей, отображающих их имя и фамилию. Когда я нажимаю на пользователя, я получаю всплывающее окно с более подробной информацией о них.
Как я могу распечатать только всплывающее окно для пользователя, которого я нажал? Всплывающее окно выглядит следующим образом:
<div id="user<?=$user->id;?>" class="popup">
<div class="details">
User details...
</div>
<a href="#print">Print</a>
</div>
Кнопка печати еще не работает.
Вы можете использовать простой JavaScript, чтобы напечатать определенный div со страницы.
var prtContent = document.getElementById("your div id");
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
Вам нужно будет открыть новое окно (или перейти на новую страницу), содержащее только информацию, которую вы хотите, чтобы пользователь мог распечатать
Javscript:
function printInfo(ele) {
var openWindow = window.open("", "title", "attributes");
openWindow.document.write(ele.previousSibling.innerHTML);
openWindow.document.close();
openWindow.focus();
openWindow.print();
openWindow.close();
}
HTML:
<div id="....">
<div>
content to print
</div><a href="#" onclick="printInfo(this)">Print</a>
</div>
Несколько примечаний здесь: якорь НЕ должен иметь пробелов между ним и div, содержащий содержимое для печати
Вместо всего сложного JavaScript вы можете добиться этого простым CSS: просто используйте два файла CSS, один для обычного экрана, а другой для отображения ТОЛЬКО содержимого вы хотите распечатать. В этом последнем файле скройте все, что вы не хотите печатать, отобразите только всплывающее окно.
Не забудьте указать атрибут media обоих файлов CSS:
<link rel="stylesheet" href="screen-css.css" media="all" />
<link rel="stylesheet" href="print-css.css" media="print" />
Я сделал это расширение jQuery для печати HTML выбранного элемента: $('#div2').print();
$.fn.extend({
print: function() {
var frameName = 'printIframe';
var doc = window.frames[frameName];
if (!doc) {
$('<iframe>').hide().attr('name', frameName).appendTo(document.body);
doc = window.frames[frameName];
}
doc.document.body.innerHTML = this.html();
doc.window.print();
return this;
}
});
Смотрите в действии здесь.
Просто используйте CSS, чтобы скрыть контент, который вы не хотите печатать. Когда пользователь выбирает печать - страница будет искать CSS " media =" print " для получения инструкций о макете страницы.
CSS = media = "print" содержит инструкции, чтобы скрыть содержимое, которое мы не хотим печатать.
<!-- CSS for the things we want to print (print view) -->
<style type="text/css" media="print">
#SCREEN_VIEW_CONTAINER{
display: none;
}
.other_print_layout{
background-color:#FFF;
}
</style>
<!-- CSS for the things we DO NOT want to print (web view) -->
<style type="text/css" media="screen">
#PRINT_VIEW{
display: none;
}
.other_web_layout{
background-color:#E0E0E0;
}
</style>
<div id="SCREEN_VIEW_CONTAINER">
the stuff I DO NOT want printed is here and will be hidden -
and not printed when the user selects print.
</div>
<div id="PRINT_VIEW">
the stuff I DO want printed is here.
</div>
Вот моя расширенная версия, когда мы хотим загрузить файлы css или есть ссылки на изображения в части для печати.
В этих случаях нам нужно подождать, пока файлы css или изображения не будут полностью загружены до вызова функции print(). Поэтому лучше переместить вызовы print() и close() в html. Ниже приведен пример кода:
var prtContent = document.getElementById("order-to-print");
var WinPrint = window.open('', '', 'left=0,top=0,width=384,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write('<html><head>');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/normalize.css">');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/receipt.css">');
WinPrint.document.write('</head><body onload="print();close();">');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.write('</body></html>');
WinPrint.document.close();
WinPrint.focus();
У меня есть лучший вариант,
Сначала разделите печатный и непечатаемый раздел по имени класса или идентификатору
window.onafterprint = onAfterPrint;
function print(){
//hide the nonPrintable div
}
function onAfterPrint(){
// Visible the nonPrintable div
}<input type="button" onclick="print()" value="Print"/>Как сказано здесь: fooobar.com/questions/103504/..., вы можете добавить конкретный раздел в скрытый фрейм с Javascript, сфокусировать его и распечатать.
В функции printPageArea() передайте определенный идентификатор div, который вы хотите распечатать. Я нашел этот код JavaScript с codexworld.com.
function printPageArea(areaID){
var printContent = document.getElementById(areaID);
var WinPrint = window.open('', '', 'width=900,height=650');
WinPrint.document.write(printContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
Полный код и учебник можно найти здесь - Как напечатать область страницы с помощью JavaScript.
Я написал крошечный модуль JavaScript под названием PrintElements для динамической печати частей веб-страницы.
Он работает путем итерации по выбранным элементам узла и для каждого узла проходит по дереву DOM до элемента BODY. На каждом уровне, включая начальный (который является уровнем узлов для печати), он присоединяет класс маркера (pe-preserve-print) к текущему узлу. Затем присоединяет другой класс маркера (pe-no-print) ко всем братьям и сестрам текущего узла, но только если на них нет класса pe-preserve-print. Как третий акт, он также присоединяет другой класс к сохраненным элементам предка pe-preserve-ancestor.
Простой простой дополнительный css только для печати скроет и покажет соответствующие элементы. Некоторые преимущества этого подхода состоят в том, что все стили сохраняются, он не открывает новое окно, нет необходимости перемещать множество элементов DOM, и, как правило, он неинвазивен с вашим исходным документом.
Смотрите демо, или прочитайте соответствующую статью для получения дополнительной информации.
window.onafterprint = onAfterPrint;
function print(){
//hide the nonPrintable div
}
function onAfterPrint(){
// Visible the nonPrintable div
}<input type="button" onclick="print()" value="Print"/>Попробуйте эту удивительную библиотеку ink-html library
import print from 'ink-html'
// const print = require('ink-html').default
// js
print(window.querySelector('#printable'))
// Vue.js
print(this.$refs.printable.$el)