从多个iframe打印预览? [英] Print preview from multiple iframes?
本文介绍了从多个iframe打印预览?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在一个页面中有几个iframe.我想在打印预览中显示所有iframe内容作为iframe的快照.我对单个iframe使用了 window.print()
,它工作正常,但是如何在多个框架中使用它呢?
I have several iframes in a page. I want to show in a print preview all the iframe contents as snapshots of iframes. I used window.print()
for individual iframes, and it's working fine, but how do I do it for multiple frames?
推荐答案
您需要一对一聚焦所有帧并合并到打印报告中.
You need to focus all frames one-by-one and merge in print report.
您可以使用以下代码来实现:
You can achieve it, with this code:
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/
Here is JsFiddle for you: http://jsfiddle.net/zur4ik/r7pvF/
这篇关于从多个iframe打印预览?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文