iframe content gets cut off when printing

问题:

I have a page with an iframe in it. The iframe's content is a couple of pages long, I've set the iframe's height to match it's content. When I try to print the page, the content of the iframe gets cut off after the first page. I've hidden all other elements/parts on the page while printing with a print stylesheet, except for the iframe. So it's the only element on the page when printed. I've tried setting the iframe's fixed height in a couple of ways:

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

I've also tried to set the iframe's fixed height in a print only stylesheet, but nothing has worked so far. It does accept other styling like a width or a border, which is visible when printing, but only for the first page.

UPDATE: It seems to be working correctly in Chrome, but it's a known and old (2001) bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=113217 Can't find an exact bug report for IE, but it seems to suffer the same fate as Firefox.

回答1:

This source from 2012 says you can detect print requests in IE 5+, Firefox 6+, Chrome 9+, and Safari 5.1+ (Opera didn't work).

(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;
}());

Having caught the events you can then do something special for your iframe where it says

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

回答2:

Just an idea: Do a focus on your ifame before print:

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

回答3:

If you place the iFrame inside of a div it should set the div height to the height of the iFrame and I believe that this could solve your issue.

i.e.

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

回答4:

The best thing to do is to put something under the iframe but that has no text in it. So something like this:

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