Question

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

Answer 1

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

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

如果您尝试在父级内部打印整个iframe，则需要嵌入特定于打印的CSS文档。使用此选项以及打印预览将帮助您进行调零。

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

Answer 2

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

iframe {
    width: 670px;
}

在Chrome浏览器中工作。

Answer 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()"
 />

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

3 个答案: