Iframe.print vs. window.print on IE - small font in the former

Question

In our web application, we have a print function for several of our pages, and we use the approach that we use to place the current page content in a globally accessible iframe document and print the iframe (using Javascript). This works fine in Firefox, but in IE it prints an iframe in a very small font, almost unreadable.

All CSS used in both browsers is the same, I ensured that the printed HTML does not overflow in any way (which makes IE suitable for content or something else) ... and yet IE print is very small. Interestingly, if I change the print logic to write to a new window, and then do window.print (), everything will work fine in IE, and the font will be as large as required / specified CSS.

Has anyone encountered a similar issue with iframe.print () in IE?

Thanks for the help.

Nitin

Answer 1

The final solution I made was to use window.print () instead of iframe.print ().

Answer 2

I found this thread after a fight with the same problem. It appears that this behavior persists even in IE11. The good news is that I was able to find a solution without having to open a new window, and then calling window.print() .

The trick is to use document.execCommand in IE (works before IE11) and gracefully drops to iframe.print() in other browsers. A complete solution might look something like this (using jQuery to select an iframe, but this is completely optional):

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

This solution was inspired by a very old topic about IE7 from here: http://bytes.com/topic/misc/answers/629926-ie7-printing-iframe-solution . However, this is still relevant.

Answer 3

I had a little print on the IE issue today, and to fix it, I just set up my print function like this:

 $(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 looks the same in IE, Chrome, and Firefox. Posted here because this solution was hard to find, so hopefully this helps someone.

Answer 4

Yes, we see the same thing. If we open the same page directly, it prints as expected. When it loads in an iframe and prints, it makes everything smaller; not just the font.

This is the use of IE9 in Windows 7.

Answer 5

As Heston Liebowitz wrote, using execCommand is a good idea and solution. But I would set an if condition for IE, because this problem only occurs in the 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(); }