javascript - w3schools - Iframe corta en la parte inferior al imprimir en IE
w3schools browsers (2)
Intenté encontrar algunas soluciones para obtener más o menos el mismo resultado. Estas soluciones deberían funcionar bien en cualquier navegador.
Mira la solución 4. Parece ser lo más cercano a lo que quieres lograr. (Con ejemplo de trabajo)
Solución 1: Creo que tengo una solución que no es perfecta, pero podría hacer el trabajo.
Justo antes de imprimir, reemplaza el iframe con una imagen del iframe. Encontré esta biblioteca llamada iframe2image : https://github.com/twolfson/iframe2image .
Para detectar el evento de impresión, puede utilizar la respuesta a esta pregunta: https://stackoverflow.com/a/23170458/2525304
No he tenido la oportunidad de probarlo, pero creo que podrías lograr algo con esto.
EDITAR :
Solución 2: Aquí hay otro pensamiento que podría funcionar. Puede utilizar este HTML a PDF api para convertir primero el contenido del iframe a un pdf. Luego incluya este pdf donde estaba el iframe (usando PDF.js por ejemplo) e imprima la página.
Aquí hay otra api que hace esto: http://www.convertapi.com/web-pdf-api
EDIT 2:
Solución 3 (ejemplo de trabajo): acabo de encontrar este sitio web que le permite incrustar un botón Save page to PDF que devolverá una versión en pdf de la página en la que se encuentra el usuario. Puede reemplazar el botón Imprimir en su página con este botón y decirle al usuario que imprima el pdf generado.
El único problema es que el usuario se envía a otro sitio web para descargar el archivo. Creo que puede obtener un enlace directo al archivo pdf al pagar la membresía básica (5 $ / mes). Podría haber servicios similares que ofrecen enlaces directos gratuitos que no he encontrado.
EDITAR 3:
Solución 4 (con ejemplo de trabajo):
Acabo de encontrar un sitio web que proporciona un enlace directo al archivo PDF generado de la página. Más información aquí: http://pdf-ace.com/save-as-pdf-button/
Ejemplo de trabajo (reemplacé el botón Print )
En IE11 imprimiendo la página de abajo, corta el iframe en la parte inferior en lugar de dejar que se expanda a la página siguiente. ¿Cómo puedo evitar eso y hacerlo imprimir todo?
Nota: para reproducir este problema, simplemente pegue el siguiente código en el bloc de notas y ábralo en IE
<html >
<head>
<style>
.myiframe{
width:100%;
height:6000px;
}
</style>
</head>
<body>
<div>
<a href="javascript:print()" ><h1>Print</h1></a>
</div>
<iframe class="myiframe" id="myiframe" scrolling="no" src="https://en.wikipedia.org/wiki/Wiki"/>
<div>
The rest of the page
</div>
</body>
</html>
En cromo funciona bien. El contenido del iframe se expande y se imprimen todo.
En realidad, solo tuve que agregar un elemento de max-height y configurarlo como max-height: 100%; que es lo que permitió a la página continuar.
Debes tener tres elementos de estilo existentes, dos de los cuales ya escribiste.
Son:
width: 100%;
height: 6000px;
max-height: 100%;
Tu body tiene una posición absolute , supongo. Intente crear y ajustar la propiedad de height CSS de los elementos posicionados absolutamente. Como no tengo el marcado y / o CSS, no puedo decir qué height debe establecer en qué elemento (s). Lo más probable es que sea 100% o auto . Posiblemente incluso una combinación de ambos.
Cuando copié y pegué el código que proporcionó en un archivo, luego lo abrí e intenté imprimir, recibí el mismo problema. Sin embargo, lo que describí anteriormente parecía estirarlo / arreglarlo con poco o ningún problema.
Cómo está escrito para mí actualmente:
.myiframe {
width: 100%;
height: 6000px;
max-height: 100%;
}
<div>
<a href="javascript:print()">
<h1>Print</h1>
</a>
</div>
<iframe class="myiframe" id="myiframe" scrolling="no" src="https://en.wikipedia.org/wiki/Wiki" />
<div>
The rest of the page
</div>