我在页面中有几个iframe。我想在打印预览中显示所有iframe内容作为iframe的快照。我曾经使用window.print()过单个iframe，但效果很好，但是如何在多个iframe中使用呢？
您需要将所有框架一一聚焦，并合并到打印报告中。
您可以使用以下代码来实现：
HTML：
<button id="printButton" onclick="javascript:printPage()" >Print this page</button>
<h1 id='header'><b>Awesome Print Report</b></h1>
<iframe id="ifr1" src="http://amazon.com"></iframe>
<iframe id="ifr2" src="http://amazon.com"></iframe>
<iframe id="ifr3" src="http://amazon.com"></iframe>
<iframe id="ifr4" src="http://amazon.com"></iframe>
<iframe id="ifr5" src="http://amazon.com"></iframe>
<iframe id="ifr6" src="http://amazon.com"></iframe>
JavaScript：
function printPage() {
window.print();
for (var k = 0; k < window.frames.length; k++) {
window.frames[k].focus();
window.frames[k].print();
}
}
CSS：
#header {
margin - top: 20px;
}
@media print {
#printButton {
display: none;
}
}
此CSS将在打印的报告上隐藏打印按钮。
这是为您提供的JsFiddle：http : //jsfiddle.net/zur4ik/r7pvF/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句