6

[这个问题的简化版： ]

为什么 iFrame 有时会拒绝打印？例如，点击print preview这两个页面：

  1. http://fiddle.jshell.net/gJDv4/1/show/
  2. http://fiddle.jshell.net/gJDv4/2/show/

在打印预览中，iFrame 在第一个示例中可见，但在第二个示例中隐藏。第一个和第二个iFrame 之间的唯一代码差异是 CSS 属性 ( ) 已添加到第二个示例中的 iFrame。margin: 20px;

[长（原）版： ]

我正在构建一个预览/打印页面，该页面组装了一堆独立的 HTML 文件，这些文件引用了他们自己的样式表和 javascript 文件。

这个想法是所有文件都显示在 iFrame 中以供预览，然后在打印时，每个 iFrame（可能会跨越多个页面）打印出来，就好像它是自己的文档一样。

但是，当我打印（或打印预览）时，iFrame 要么不显示任何内容，要么只打印第一页，截断 iFrame 的剩余页面。

在我制作多页之前，iFrame 打印（和打印预览）就好了：

这种行为的原因是什么？

4

2 回答 2

4

print()您可以通过在其窗口上调用该函数来打印各个 iframe 中的文档....

所以像这样打印文件2：

$('#iframeTwo')[0].contentWindow.print()

这里是一个 jsfiddle，我在其中添加了触发单个打印的按钮...

http://jsfiddle.net/sg3s/GJKkm/17/

至于为什么浏览器在打印其父文档时不打印 iframe 内的内容。可能与这些文档实际上并不是它们所显示的文档的一部分这一事实有关......把它想象成一个单独的窗口（你可以window.open()在 js 中生成一个），然后巧妙地侵入主窗口视口限制为 iframe 上指定的任何内容的文档。

于 2012-06-07T20:24:58.140 回答
2

我想出了一个方法来解决它。

目的是通过使用 javascript 操作 DOM 将所有 iframe 的内容获取到父窗口中。

使用此解决方案，您甚至可以避免 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 concatenated iframes innerHTML
window.content.document.body.innerHTML = pages;
// then we print this new window that contains all the iframes
window.print();
} 
else {
// do nothing
}


}
</script>

有了这个，你只会得到一个打印对话框来打印所有的 iframe。

请记住，在您的父页面 HTML 中，您将拥有以下代码来调用 printPage 函数。

<input type="submit" value="Print All"
  onclick="javascript:printPage()"
 />
于 2020-05-31T23:05:40.647 回答