3

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

4

5 回答 5

6

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

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

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/

于 2013-10-28T12:25:09.803 回答
1

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

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/

于 2013-10-26T08:52:57.900 回答
0

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

祝你好运！

于 2013-10-25T11:40:57.897 回答
0

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

  • 在每个旁边提供隐藏图像（带预览）iframe
  • 使用媒体查询为打印机提供单独的 CSS 文件
  • 在这个文件中，隐藏 iframe 并显示图像

如果您这样做，您将在打印视图中获得带有预览的图像而不是 iframe。

于 2013-10-22T18:02:55.457 回答
0

是的，可以将所有 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()"
 />
于 2020-05-31T22:07:32.170 回答