从多个 iframe 打印预览？

Question

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

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为打印机提供单独的CSS文件
• 在此文件中，隐藏 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()"
 />