Question

我有一个包含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相同的命运。

Answer 1

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.');

Answer 2

只是一个想法：在打印之前关注你的ifame：

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

Answer 3

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

即

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

Answer 4

这是使用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，您也只会得到一个打印对话框。

Answer 5

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

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

iframe内容在打印时被切断

5 个答案: