iframe content gets cut off when printing

Question

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.

Yes, I've set scrolling="yes" on the iframe as well. Or do you mean the content in the iframe? — Gregory Bolkenstijn, Apr 09 '14 at 14:14
you should set `overflow:sroll` to enable scroll of the contents of the iframe — TheGr8_Nik, Apr 09 '14 at 14:18
Here you could find solution for your problem: [how-do-i-print-an-iframe-from-javascript-in-safari-chrome][1] [1]: http://stackoverflow.com/questions/472951/how-do-i-print-an-iframe-from-javascript-in-safari-chrome — Luca Detomi, Apr 09 '14 at 14:19
That's a javascript solution, I'm looking for a way to catch the normal way or printing, say CTRL+P. Unless there is a way to catch the print event? — Gregory Bolkenstijn, Apr 09 '14 at 14:43
You can use the below code to catch Ctrl+p event -`$(document).ready(function(){ $(document).keydown(function(event) { if (event.ctrlKey==true && (event.which == '80') { alert('thou. shalt. not. PRINT!'); event.preventDefault(); } }); });` — Ashutosh, Apr 14 '14 at 08:33
Hey dude you simply need a bit of javascript to ping values from the iframe to your page, this only works if you have access to the site where the iframe is pointing to, then you can ping the actual height of the contents to the js where the iframe is and you can set the iframe to 100% and change the body height to actual height of the conten, thats easy been done using for examle easyXDM — john Smith, Apr 19 '14 at 13:29
Please have a look at [print stylesheet, one page prints and cuts off remaining text](http://stackoverflow.com/questions/1312320/print-stylesheet-one-page-prints-and-cuts-off-remaining-text). `overflow:visible` is working fine for me in IE9. — Braj, Apr 19 '14 at 19:16

score 4 · Answer 1 · answered Apr 19 '14 at 13:09

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

This is a good idea, but it doesn't completely solve my problem. I would have to relay the print command into the iframe through postmessage (it's cross domain). — Gregory Bolkenstijn, Apr 21 '14 at 14:15

score 1 · Answer 2 · answered Apr 20 '14 at 21:54

1

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

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

answered Apr 20 '14 at 21:54

doydoy44

5,720
4
29
45

score 0 · Answer 3 · answered Apr 14 '14 at 15:33

0

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>

answered Apr 14 '14 at 15:33

Adjit

10,134
12
53
98

Medical Doctor - Programmer · Answer 4 · 2020-06-01T21:39:23.910

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.

score -5 · Answer 5 · answered Apr 14 '14 at 15:27

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

answered Apr 14 '14 at 15:27

e---

40
8

iframe content gets cut off when printing

5 Answers5

Linked