我在一个页面中有几个 iframe。我想在打印预览中将所有 iframe 内容显示为 iframe 的快照。我用了window.print()
对于单个 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/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)