如何打印包含多个页面的 IFRAME？答案

【问题标题】：How to print an IFRAME containing multipe pages?如何打印包含多个页面的 IFRAME？
【发布时间】：2013-06-25 13:26:07
【问题描述】：

我想知道是否可以打印包含跨多个页面的 IFRAME 的 HTML 页面。由于某种原因，浏览器在第一页之后不断截断 IFRAME。这是一个演示上述问题的简约示例。首先，这是一个简单的 HTML 页面，其中包含一个应该针对打印进行优化的 IFRAME：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TEST</title>

    <style>
        html, body {
            height: 100%;
        }

        iframe {
            width: 100%;
            height: 100%;
        }
    </style>

  </head>
  <body>
    <iframe src="iframe-content.html">
    </iframe>
  </body>
</html>

这是我要嵌入的页面：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TEST-CONTENT</title>

  </head>
  <body>
    <p>
      Some very, very long text spawning multiple pages.
    </p>
  </body>
</html>

使用 JavaScript 不是一种选择。我正在寻找仅使用 CSS 的解决方案。任何帮助将不胜感激。

【问题讨论】：

你想要发生什么？用例是什么？当有人按下ctrl+p时，你想打印整个iFrame吗？
是的，完全正确：我希望在用户按下 CTRL+P 时打印整个 IFRAME。用例是我正在开发一个嵌入另一个应用程序内容的应用程序。这是一项严格的要求，即无需应用任何 JavaScript 魔法即可进行打印。
作为 IFrame 源链接的“打印”按钮怎么样？ iframe 也是来自同一个域吗？
不幸的是，“打印”按钮不是一个选项，因为我们的要求之一是 CTRL+P 可以正常工作。 IFRAME 来自同一个域。

标签： css iframe printing

【解决方案1】：

您可以在父文档的元数据中指定，因为 CSS 无法指定要打印的页面，仅指定其外观。

<link rel=alternate media=print href="printme.html">

如果您尝试在父级内打印整个 iframe，则需要嵌入特定于打印的 CSS 文档。将其与打印预览一起使用将帮助您进行归零。

<link rel="stylesheet" href="print.css"  media="print">

【讨论】：

非常感谢您的回答。不幸的是<link rel=alternate media=print href="printme.html"> 似乎只在 IE 中工作。至于打印特定的 CSS 文件：我们已经对它们进行了很多实验，但没有找到解决方案。能具体一点吗？
我真的希望这是一件事。 (It is part of the spec.) 不幸的是，我无法让它在 Chrome 中运行，我发现 this Firefox ticket 这似乎表明他们并不急于支持它。

【解决方案2】：

只有 CSS 解决方案 - 必须将 iframe 宽度设置为静态大小。对于 A4 Portrait，宽度值接近 670 像素。对于横向打印，该值将是另一个值。

iframe {
    width: 670px;
}

在铬浏览器中工作。

【讨论】：

【解决方案3】：

我的解决方案使用 javascript 来操作 DOM。

另外，您的 iframe 需要如下所示的 id 属性 -- id='iframe1'

<body>
  <iframe id='iframe1' src="iframe-content.html">
  </iframe>
</body>

这里是javascript代码：

<script>

 pages =[] // initiate an empty list here

function printPage() {

// get the iframe and push its innerHTML into the list    

var frame_content = document.getElementById('iframe1');
pages.push(frame_content.contentWindow.document.body.innerHTML); 

if (pages && pages.length) {

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

// Then we now set the parent window to be equal to pages

window.content.document.body.innerHTML = pages;
// then we print this new window that contains the iframe's innerHTML
window.print();
} 
else {
// do nothing
}


}

使用此解决方案，打印不会截断您的页面。

此外，如果您有多个 iframe，它只会生成一个打印对话框。

有人可能想知道为什么我要推送一个列表。这适用于您拥有多个 iframe 的情况，因此您可以轻松推送和连接它们的所有 innerHTML。

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

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

【讨论】：