打印网页的特定部分
我试图打印我的应用程序的特定部分。
该应用程序有一个用户列表，显示他们的名字和姓氏。 当我点击一个用户时，我得到一个popup式的更详细的信息。
我怎么去打印一个用户点击的popup窗口？ popup窗口如下所示：
<div id="user<?=$user->id;?>" class="popup"> <div class="details"> User details... </div> <a href="#print">Print</a> </div> 打印button虽然不工作。
您可以使用简单的Java脚本来打印页面的特定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之间不能有空格
我使用这个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; } });
在这里看到它的行动。
在printPageArea()函数中，传递要打印的特定div ID。 我从codexworld.comfind了这个JavaScript代码。
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(); }
完整的代码和教程可以在这里find – 如何使用JavaScript打印页面区域 。
实际上，您可以用简单的CSS来实现这一点，而不是使用所有复杂的JavaScript：只使用两个CSS文件，一个用于正常的屏幕显示，另一个用于显示您希望打印的内容。 在后面的文件中，隐藏你不想打印的所有内容，只显示popup窗口。
请记住定义两个CSS文件的media属性：
<link rel="stylesheet" href="screen-css.css" media="all" /> <link rel="stylesheet" href="print-css.css" media="print" />
正如在这里回答： https ： //stackoverflow.com/a/1072151/421243 ，您可以添加特定的部分到一个隐藏的框架与Javascript，集中，并打印出来。
这是我的增强版本，当我们要加载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();
