2011-11-08 19 views
7

En nuestra aplicación web, tenemos funcionalidad de impresión para algunas de nuestras páginas y el enfoque que tomamos es poner el contenido de la página actual en un iframe globalmente disponible documente e imprima el iframe (usando Javascript). Esto funciona totalmente bien en Firefox pero en IE imprime el iframe en una fuente muy pequeña, casi ilegible.iframe.print vs. window.print en IE - fuente pequeña en el anterior

Todos los CSS aplicados en ambos navegadores son los mismos, me aseguré de que el HTML que se está imprimiendo no se desborde de ninguna manera (haciendo que IE se ajuste al contenido o algo) ... y aún así la impresión de IE es muy pequeña. Curiosamente, si cambio la lógica de impresión para escribir en una nueva ventana y luego hago window.print(), todo funciona bien en IE y la fuente es tan grande como lo requiere/especifica CSS.

¿Alguien ha enfrentado un problema similar con iframe.print() en IE?

Gracias por la ayuda.

Nitin

+0

¿Tiene algún CSS específico para la impresión? –

+0

No lo tenía inicialmente pero creé uno sin ninguna ayuda. Incluso con impresión específica, CSS IE imprime el iframe en letra pequeña. – legendofawesomeness

Respuesta

0

solución final que adopté fue utilizar window.print() en lugar de iframe.print().

1

Sí, estamos viendo la misma cosa. Si abrimos la misma página directamente, imprime como es de esperar. Cuando se carga en un iframe e imprime, todo es más pequeño; no solo la fuente.

Este es el uso de IE9 en Windows 7.

4

Encontré este hilo después de lidiar con el mismo problema. Parece que este comportamiento persiste incluso en IE11. La buena noticia es que pude encontrar una solución sin recurrir a abrir una nueva ventana y luego llamar al window.print().

El truco es usar document.execCommand en IE (funciona hasta IE11), y retroceder graciosamente a iframe.print() en otros navegadores. La solución completa podría ser algo como esto (usando jQuery para seleccionar un iframe, pero eso es totalmente opcional):

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

Esta solución fue inspirado por un hilo muy antiguo sobre IE7 desde aquí: http://bytes.com/topic/misc/answers/629926-ie7-printing-iframe-solution. Sin embargo, sigue siendo relevante.

+0

Esto no funcionó para mí en IE 11.0.9600.16659. El tamaño de fuente sigue siendo pequeño cuando se intenta imprimir el contenido de un iframe. – justanotherprogrammer

+1

Desde un lado no programático, cuando fui a configuración -> imprimir -> configuración de página y deseleccioné la casilla 'Habilitar contracción', el tamaño del texto volvió al tamaño normal. – justanotherprogrammer

+0

La solución no funciona en Firefox. Ver [contentWindow.document.execCommand ('print', false, null) no funciona en firefox] (http://stackoverflow.com/questions/25323371/contentwindow-document-execcommandprint-false-null-not-working-in-firefox). Hice el error de probar la solución en Chrome e IE y resolvió este problema, pero no me enteré de romper FF hasta que lancé el código a la producción. Tonto de mí. – Karl

0

Como escribió "Heston Liebowitz", el uso de "execCommand" es una buena idea y solución. Pero establecería la condición if para IE, porque este problema aparece solo en el caso de IE. A continuación se muestra mi sugerencia:

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

estaba teniendo la letra pequeña en cuestión IE hoy en día, y fijar simplemente ajusté la función de impresión como tan:

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

Ahora parece que imprimir el mismo en IE, Chrome y Firefox. Publicado aquí porque esta solución fue difícil para mí encontrar, así que espero que esto ayude a alguien.

Cuestiones relacionadas