4

我想知道是否可以打印包含跨多个页面的 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 的解决方案。任何帮助将不胜感激。

4

3 回答 3

0

您可以在父文档的元数据中指定，因为 CSS 没有能力指定要打印的页面，只是它的外观。

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

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

<link rel="stylesheet" href="print.css"  media="print">
于 2013-06-25T22:57:55.533 回答
0

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

iframe {
    width: 670px;
}

在铬浏览器中工作。

于 2015-03-26T11:11:07.110 回答
0

我的解决方案使用 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()"
 />
于 2020-06-01T00:32:41.067 回答