Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iframe content gets cut off when printing

Tags:

html

css

iframe

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.

like image 216
Gregory Bolkenstijn Avatar asked Apr 09 '14 14:04

Gregory Bolkenstijn


2 Answers

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.');
like image 139
GavinBrelstaff Avatar answered Nov 05 '22 07:11

GavinBrelstaff


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

var myf = document.getElementById("myiframe");
var contentWindow = myf.contentWindow;
contentWindow.focus();
contentWindow.print();
like image 42
doydoy44 Avatar answered Nov 05 '22 06:11

doydoy44