我正在尝试打印应用程序的特定部分。
该应用程序有一个用户列表，显示他们的名字和姓氏。当我点击一个用户时，我会看到一个弹出窗口，其中包含有关他们的更多详细信息。
我将如何为我点击的用户打印弹出窗口？弹出窗口如下所示：
<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();
您必须打开一个新窗口（或导航到新页面），其中仅包含您希望用户能够打印的信息
文字：
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 之间不能有空格
我制作了这个 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;
}
});
在这里查看它的实际效果。
代替所有复杂的 JavaScript，您实际上可以通过简单的方式实现这一点CSS：只需使用两个 CSS 文件，一个用于正常屏幕显示，另一个用于仅显示您希望打印的内容。在后一个文件中，隐藏您不想打印的所有内容，仅显示弹出窗口。
记得定义media两个 CSS 文件的属性：
<link rel="stylesheet" href="screen-css.css" media="all" />
<link rel="stylesheet" href="print-css.css" media="print" />
只需使用 CSS 隐藏您不想打印的内容。当用户选择打印时 - 页面将查看“ media="print" CSS 以获取有关页面布局的说明。
该媒体=“打印” CSS按指示来隐藏我们不希望打印的内容。
<!-- 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>