iframe.print frente a window.print en IE - fuente pequeña en la antigua

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?

Gracias por la ayuda.

Nitin

preguntado el 08 de noviembre de 11 a las 19:11

Do you have any CSS specific to printing? -

Did not have it initially but I created one without any help. Even with specific print CSS IE prints the iframe in small font. -

5 Respuestas

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().

El truco es usar 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];
try {
    target.contentWindow.document.execCommand('print', false, null);
} catch(e) {
    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.

Respondido el 05 de diciembre de 13 a las 03:12

This did not work for me on IE 11.0.9600.16659. The font size is still small when trying to print the contents of an iframe. - otro programador

From a non-programmatic side, when I went to settings -> print -> page setup and unchecked the box 'Enable Shrink-to-Fit', the text size returned to the normal size. - otro programador

The solution does not work in Firefox. See contentWindow.document.execCommand('print', false, null) not working in firefox. I made the error of testing solution in Chrome and IE and it solved this problem but I didn't find out about breaking FF until I released code to production. Silly me. - Karl

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.

Respondido 14 Jul 15, 16:07

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.

Respondido el 05 de enero de 12 a las 19:01

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

Respondido 07 Feb 12, 22:02

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

Respondido el 13 de diciembre de 14 a las 11:12

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.