El problema es que los navegadores usan el ancho del iframe del contenedor para determinar cómo escalar el contenido de ese marco para imprimir. Por lo tanto, los marcos necesitan tener sus anchos explícitamente determinados.
Desafortunadamente, calcular dinámicamente los anchos de impresión es bastante complicado e implica algunos hackers. Tal vez sea mejor simplemente diseñar un ancho fijo de páginas de componentes y codificar el ancho del iframe para eso.
Sin embargo, si usted realmente necesita dinámicamente el tamaño, puede ejecutar el siguiente código después de que el documento se ha cargado (probado en Chrome):
var iframes = document.getElementsByTagName("iframe");
for(var i = 0; i < iframes.length; ++i) {
var curFrame = iframes[i];
var curBody = curFrame.contentDocument.body;
curBody.innerHTML = '<div id="iframe-print-content" style="display:inline-block; overflow:hidden; white-space: nowrap;">'
+ curBody.innerHTML + '</div>';
var printContent = curFrame.contentDocument.getElementById("iframe-print-content");
var curWidth = printContent.offsetWidth + printContent.offsetLeft;
iframes[i].style.width=(curWidth + "px");
}
Después de ejecutar este, puede imprimir normalmente o llamar window.print() o haz lo que quieras
Nota: Este método de trabajo no es en IE6 o IE7, ya que no son compatibles con inline-block. (También hay algunos otros navegadores antiguos que tampoco). Puede, por supuesto, tratar
display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; overflow:hidden; white-space: nowrap;
lugar, lo que probablemente se hará cargo de la mayor parte de estos casos, pero no hacer promesas para los navegadores antiguos.
Buena suerte, lamento escuchar que se quedó atascado con el código en esas páginas.
Editar: La solución anterior es un poco inconstante en Firefox.
Solución para Firefox (probado & trabajando en Firefox 5):
var iframes = document.getElementsByTagName("iframe");
for(var i = 0; i < iframes.length; ++i) {
var curFrame = iframes[i];
var curBody = curFrame.contentDocument.body;
var oldHTML = curBody.innerHTML;
curBody.innerHTML = '<div id="iframe-print-content" style="display:inline-block; overflow:hidden;">' + oldHTML + '</div>';
var printContent = curFrame.contentDocument.getElementById("iframe-print-content");
var curWidth = printContent.offsetWidth + printContent.offsetLeft + 25;
var curHeight = printContent.offsetHeight + printContent.offsetTop + 25;
curBody.innerHTML = oldHTML;
iframes[i].style.width=(curWidth + "px");
iframes[i].style.height=(curHeight + "px");
}
Para una explicación completa de por qué este enfoque general funciona, ver mi respuesta anterior.
¿Qué es diferente de la solución anterior y por qué?
En primer lugar, las características específicas de Firefox:
Hay algunas diferencias clave. El primero es darse cuenta de que Firefox maneja display: inline-block y white-space: nowrap de manera diferente que Chromium/WebKit para elementos de ancho fijo (razón por la cual un documento parecía realmente inestable con el código anterior). Luego se da cuenta de que a Firefox le gusta dar un poco de margen dentro de sus iframes. No estoy muy familiarizado con el código de Firefox que hace esto (me paso el día pirateando Chromium), pero mi solución habitual (aparte de evitar los fotogramas) es solo dar un 25px extra en los márgenes. Una pequeña suma como esta parece ser un truco popular para solucionar este tipo de problema.
Ahora, las partes del código que son realmente mejores:
En primer lugar, esta ahora almacena el cuerpo de edad, levanta el cuerpo sobre un div para tomar medidas, a continuación, restaura el cuerpo de edad. Esto debería evitar problemas con CSS inflexible y debería garantizar un comportamiento más predecible. En segundo lugar, esto ahora hace lo mismo para la altura que para el ancho (mi anterior suposición de que los anchos de codificación difícil funcionarían no era bueno, y de todos modos esta es una solución más flexible).
¿Por qué sigue siendo malo?
Quitar el white-space: nowrap hará que el texto se ajuste en la impresión en Chromium/WebKit. Todavía se imprime bien, pero no es exactamente correcto, ya que algún texto adicional se ajustará. Para que esto sea una solución realmente viable, aún tiene que hacer el código de detección del navegador.
De nuevo, recomiendo usar este código para descubrir rápidamente los anchos y alturas apropiados, y luego probar y codificar los tamaños correctos para cada navegador. Es una solución desagradable, pero en última instancia es la única solución verdaderamente robusta en esta situación.
500! ¡se ve bien! ¿puedes poner estos archivos en zip y publicar el enlace aquí? Definitivamente intentarlo! – Tarun
Aquí hay un archivo comprimido de los archivos: http://dl.dropbox.com/u/291229/print-test.zip – Kevin
lo siento, no lo pude arreglar. Lo mejor que recomiendo es intentar cargar contenido mediante ajax en lugar de usar iframes. – Tarun