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/

Answer 2

愿这段代码对你有所帮助..

<强> HTML ：

<input type="submit" value="Print All"
  onclick="javascript:printall()"
/>
<p>Hi! I'm a report!</p>
<iframe id="frame1" src="http://indiabix.com"></iframe>
<iframe id="frame2" src="http://indiabix.com"></iframe>
<iframe id="frame3" src="http://indiabix.com"></iframe>
<iframe id="frame4" src="http://indiabix.com"></iframe>

<强>脚本

function printall() {
  window.print();
  for (var i=0; i<window.frames.length; i++) {

    window.frames[i].focus();
    window.frames[i].print();
  }
}

小提琴：http://jsfiddle.net/ackMC/5/

Answer 3

如果iframe预览可能只是静态图片，您可以执行以下操作：

在每个iframe
使用media queries
在此文件中，隐藏iframe并显示图片

如果您这样做，您将在打印视图中包含预览而非iframe的图片。

Answer 4

我认为这里最大的问题是将来自不同帧的内容放到一个可以打印的视图中。您希望在.pdf或window.print()中使用此功能。您是否有可能将所有需要打印的帧的内容都打印到一个文档（框架）中？例如，使用AJAX，cURL或PHP方法？我认为这是制作一份可打印文件的唯一方法。

祝你好运！

Answer 5

是的，可以将所有要打印的iframe的内容打印到父窗口中。我用这段代码实现了。

<script>

pages =[] // initiate an empty list here

function printPage() {

var frames = document.getElementsByTagName('iframe');
// get all the iframes and loop over them
// then push their innerHTML into the list
for (var i = 0; i < frames.length; i++){ 
        pages.push(frames[i].contentWindow.document.body.innerHTML); 
    ;
}
if (pages && pages.length) {

// this if statement, just checks to ensure our list is not empty before running the code.

// here is the magic, we now set the parent window to be equal to all the iframes innerHTML
    window.content.document.body.innerHTML = pages;
// then we print this new window that contains all the iframes
    window.print();
} 
else {
// do nothing
}


}

使用此解决方案，您甚至可以避免iframe超过一页时被切断的问题。

此外，您只有一个打印对话框，而不是打印所有页面。

在父页面HTML中，您将具有下面的代码来调用printPage函数。

<input type="submit" value="Print All"
  onclick="javascript:printPage()"
 />

从多个iframe打印预览？

5 个答案: