从多个 iframe 打印预览？

Question

我在一个页面中有几个 iframe。我想在打印预览中将所有 iframe 内容显示为 iframe 的快照。我用于window.print()单个 iframe，它工作正常，但如何为多个框架执行此操作？

Answer 1

您需要将所有帧一一聚焦并合并到打印报告中。

您可以使用以下代码实现它：

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/