CODEWITHSUNDEEP
internet-exploreriframeprinting
legendofawesomeness
legendofawesomeness

Reputation: 2911

iframe.print vs. window.print on IE - small font in former

In our web application, we have print functionality for a couple of our pages and the approach we take is to put the current page's content in a globally available iframe's document and print the iframe (using Javascript). This works totally fine in Firefox but in IE it prints the iframe in a very small font, almost unreadable.

All the CSS's applied in both the browsers are same, I ensured that the HTML being printed is not overflowing in any way (making IE to fit the content or something)...and still IE print is very small. Interestingly, if I change the printing logic to write to a new window and then do window.print(), everything works fine in IE as well and the font is as big as required/specified by CSS.

Has anyone faced a similar problem with iframe.print() in IE?

Thanks for the help.

Nitin

Upvotes: 8

Views: 7651

Answers (5)

Heston Liebowitz
Heston Liebowitz

Reputation: 1685

I found this thread after grappling with the same issue. It looks like this behavior persists even in IE11. The good news is I was able to find a solution without resorting to opening a new window and then calling window.print().

The trick is to use document.execCommand in IE (works all the way up to IE11), and fall back gracefully to iframe.print() in other browsers. The complete solution could look something like this (using jQuery to select an iframe, but that's entirely optional):

var target = $('iframe')[0];
var isPrintCommandSupported = true;
try {
    isPrintCommandSupported = target.contentWindow.document.execCommand('print', false, null);
} catch(e) {
    target.contentWindow.print();
}
if (!isPrintCommandSupported) target.contentWindow.print();

This solution was inspired by a very old thread about IE7 from here: http://bytes.com/topic/misc/answers/629926-ie7-printing-iframe-solution. It's still relevant, though.

Upvotes: 5

Connor
Connor

Reputation: 31

Was having the small print on IE issue today, and to fix I simply adjusted my print function as so:

$(document).ready(function(){
$("#printFrame").click(function(){    
    if (document.queryCommandSupported('print')) 
    {
        $("#iframe").get(0).contentWindow.document.execCommand('print', false, null);
    } 
    else 
    {
        $("#iframe").get(0).contentWindow.focus();
        $("#iframe").get(0).contentWindow.print();
    }
  });
});

Now it seems to print out the same on IE, Chrome and Firefox. Posted here because this solution was hard for me to find, so hopefully this will help someone.

Upvotes: 3

user3815508
user3815508

Reputation: 399

As "Heston Liebowitz" wrote, the use of "execCommand" is a good idea and solution. But I would set the if-condition for IE, because this problem appears only in case of IE. Below is my suggestion:

// Get the iframe element
var oIFrame = $('#iF_Print').get(0);
// Fix for IE : Allow it to render the iframe
oIFrame.focus();

var bMS_IE = false;
// Verify whether the browser is Internet Explorer (IE8,IE9,IE10 -> "msie", but for IE11 the name is changed into "trident").
var userAgent = window.navigator.userAgent.toLowerCase();
bMS_IE = ( (userAgent.indexOf('msie ') > -1) || (userAgent.indexOf("trident/") > -1) )?true:false;

if ( bMS_IE ) {
        try {
            oIFrame.document.execCommand('print', false, null);
        }catch(e) {
            window.print();
        }
}else {
    oIFrame.print();
}

Upvotes: 0

legendofawesomeness
legendofawesomeness

Reputation: 2911

Final solution that I adopted was to use window.print() instead of iframe.print().

Upvotes: 0

Sarel Botha
Sarel Botha

Reputation: 12700

Yes, we're seeing the same thing. If we open the same page directly it prints as you would expect. When it is loaded in an iframe and printed it makes everything smaller; not just the font.

This is using IE9 on Windows 7.

Upvotes: 1

Related Questions