打印时 iframe 内容被截断答案

【问题标题】：iframe content gets cut off when printing打印时 iframe 内容被截断
【发布时间】：2014-05-22 19:26:40
【问题描述】：

我有一个包含 iframe 的页面。 iframe 的内容有几页长，我设置了 iframe 的高度以匹配它的内容。当我尝试打印页面时，iframe 的内容在第一页之后被截断。我在使用打印样式表打印时隐藏了页面上的所有其他元素/部分，iframe 除外。所以它是打印时页面上唯一的元素。我尝试通过几种方式设置 iframe 的固定高度：

<iframe src="page.html" style="height: 2100px;" height="2100" scrolling="yes">

我还尝试在仅打印样式表中设置 iframe 的固定高度，但到目前为止没有任何效果。它确实接受其他样式，例如宽度或边框，这些样式在打印时可见，但仅适用于第一页。

更新： 它似乎在 Chrome 中正常工作，但它是 Firefox 中一个已知的旧 (2001) 错误：https://bugzilla.mozilla.org/show_bug.cgi?id=113217 找不到 IE 的确切错误报告，但它似乎遭遇了与 Firefox 相同的命运。

【问题讨论】：

iframe 是否设置为可滚动？
是的，我也在 iframe 上设置了 scrolling="yes"。还是您的意思是 iframe 中的内容？
你应该设置overflow:sroll来启用iframe内容的滚动
在这里您可以找到解决问题的方法：[how-do-i-print-an-iframe-from-javascript-in-safari-chrome][1] [1]: stackoverflow.com/questions/472951/…
这是一个javascript解决方案，我正在寻找一种捕捉正常方式或打印的方法，比如CTRL+P。除非有办法捕捉打印事件？

标签： html css iframe

【解决方案1】：

最好的办法是在 iframe 下放一些东西，但里面没有文字。所以是这样的：

...
iframe code here
<a href="#"> </a>

【讨论】：

【解决方案2】：

如果您将 iFrame 放在 div 内，它应该将 div 高度设置为 iFrame 的高度，我相信这可以解决您的问题。

即

<div>
    <iFrame></iFrame>
</div>

【讨论】：

【解决方案3】：

这个 2012 年的 source 说您可以在 IE 5+、Firefox 6+、Chrome 9+ 和 Safari 5.1+ 中检测打印请求（Opera 无法使用）。

(function() {
    var beforePrint = function() {
        console.log('Functionality to run before printing.');
    };
    var afterPrint = function() {
        console.log('Functionality to run after printing');
    };

    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;
}());

捕捉到事件后，您可以为iframe 做一些特别的事情

console.log('Functionality to run before printing.');

【讨论】：

这是个好主意，但并不能完全解决我的问题。我将不得不通过 postmessage 将打印命令中继到 iframe（它是跨域的）。

【解决方案4】：

只是一个想法：在打印之前关注您的 iname：

var myf = document.getElementById("myiframe");
var contentWindow = myf.contentWindow;
contentWindow.focus();
contentWindow.print();

【讨论】：

【解决方案5】：

这是一个简单的解决方案，使用 javascript 操作 DOM 并将当前窗口设置为等于 iframe 的窗口，然后发出打印命令。

<html>
<body>

<iframe id='first_iframe' src="xxx" style="width:718px; height:700px;" frameborder="0"></iframe>

<iframe id='second_iframe' src="yyy" style="width:718px; height:700px;" frameborder="0"></iframe>

</body>
</html>

<script>

 pages =[] // initiate an empty list 

function printPage() {


var frame1 = document.getElementById('first_iframe');
// get the first_iframe and
// then push its innerHTML into the list
   pages.push(frame1.contentWindow.document.body.innerHTML); 


var frame2 = document.getElementById('second_iframe');
// get the first_iframe and
// then push its innerHTML into the list
   pages.push(frame1.contentWindow.document.body.innerHTML); 


if (pages && pages.length) {

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

// here is the magic, we now set the parent window to be equal to all the concatenated innerHTML
window.content.document.body.innerHTML = pages;
// then we print this new window that contains all the iframes
window.print();
} 
else {
// do nothing
}


}
</script>

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

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

使用此解决方案，您可以避免 iframe 在超过一页时被切断的问题。其次，即使您有多个 iframe，您也只会得到一个打印对话框。

【讨论】：