Iframe Content Gets Cut Off When Printing

July 31, 2022 Post a Comment

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

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

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

Solution 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>

Solution 4:

Here is a simple solution using javascript to manipulate the DOM and set the current window to equal the iframe's window, then issue the print command.

<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>

Remember that in your parent page HTML you will have the code below to call the printPage function.

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

With this solution you avoid the problem of the iframe being cut off if it exceeds one page. Secondly, you get only one print dialogue box even if you have multiple iframes.

Solution 5:

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>

Html5 Info