una - Firefox imprime solo la primera página
imprimir una pagina web tal como se ve (12)
Estoy trabajando en CSS imprimible para un sitio web. Muestra / imprime perfectamente en IE, pero Firefox (versión 3.6) solo muestra / imprime la primera página.
¿Alguien sabe algo que generalmente causaría esto? El marcado es bastante complicado, ¡así que no estoy seguro de por dónde empezar!
Gracias.
Editar
Esta solución solo empeoró las cosas.
https://support.mozilla.com/ga-IE/questions/667285#answer-115916
Parece que imprimir solo apesta en FF. Al cliente no le gustará escuchar eso. ¡Ojalá no usen FF!
Después de una gran cantidad de investigación y prueba y error, he encontrado este artículo por una lista aparte. Era escéptico porque es muy viejo, pero dice que:
Si un elemento flotante se extiende más allá de la parte inferior de una página impresa, el resto del flotador desaparecerá de manera efectiva, ya que no se imprimirá en la página siguiente.
Como tengo un gran contenedor flotante pensé que lo probaría. Entonces, hice una mezcla de otras respuestas y este artículo y se me ocurrió esto:
body {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
/*this is because I use angular and have this particular layout*/
body > .fade-ng-cloak {
height: 100%;
display: block;
flex: none;
float: none;
}
.l-content,
.l-sidebar {
float: none;
}
Así que básicamente:
- Configuración del cuerpo al
overflow: visible - Configuración de elementos que se comportan como envolturas para
display: block, eliminar todosflexestilosflexy restablecer la altura si es necesario - Eliminar el
floaten contenedores largos
¡Esa mezcla funcionó para mí! Estoy tan feliz que pensé en compartir :)
El error de larga data con la impresión de elementos absolutamente posicionados se corrigió en Firefox 3.
Los problemas con las páginas faltantes se rastrean en la falla 521204 (consulte la lista "depende de"). ¿Tiene marcos o tablas largas en la página que intenta imprimir?
Y sí, la impresión en Firefox es de poca propiedad, siento que tengas que lidiar con eso ...
Firefox ciertamente NO apesta en ningún aspecto. Sin embargo, a veces se adhiere más estrictamente a los estándares que otros navegadores. De todos modos, para ir al grano, tuve el mismo problema, es decir, Firefox estaba imprimiendo (también previsualizando) solo las primeras 2 páginas de un informe de varias páginas, construido con una tabla larga, producida por una página web mía. Después de algunas depuraciones descubrí que había incluido la mayor parte del contenido del informe dentro de un elemento span con un estilo de {display: inline-block;} entre otras cosas. Tan pronto como eliminé eso, la paginación era perfecta ...
Intenté agregar @media print como se sugiere en esta respuesta como una definición de style al elemento <body> la página, pero Firefox (60.0 (64-bit), Windows 7 64 / Pro) aún truncó la impresión del sitio web a la primera página solamente .
Entonces, me di cuenta de una casilla titulada Simplify Page en la parte superior de la pantalla de Firefox Print Preview:
Cuando marqué esta casilla, Firefox eliminó parte del diseño, pero la pantalla de Vista previa de impresión se actualizó para incluir todas las páginas del sitio web.
No estoy seguro de cuán ampliamente aplicable es este YMMV, ¡pero vale la pena intentarlo! Hasta ahora no he encontrado una solución comparable para Chrome (Versión 65.0.3325.162 (compilación oficial) (64 bits)).
PD: en cuanto a la experiencia, veo que Simplify Page elimina no solo el estilo, sino también algunos elementos completos, como las secciones de código de muestra, así que asegúrese de revisar los resultados cuidadosamente antes de imprimir.
Intenté una docena de correcciones para esto y, al final, todo lo que necesitaba era:
@media print {
body {
display: block;
}
}
Me acabo de enterar, que de un elemento con
display:inline-block;
solo se imprime la primera página y todo lo demás está oculto. estableciendo esto para
display:block;
fue la solución en mi caso.
Si no puede superar las limitaciones de impresión de Firefox, puede convertir la página a PDF. Si estás preparado para esa opción, Prince XML es una biblioteca que recomiendo encarecidamente. Tiene muy buena compatibilidad con CSS, incluidos los medios impresos.
Si no quieres revisar todo tu código, esto es lo único que he encontrado que funciona para mí sin estropear todos mis otros CSS:
@media print {
body {
overflow: visible !important;
}
}
Tuve el mismo problema porque la height del body está configurada al 100% , después de que modifiqué a la height: auto en mi print.css , funcionó.
@media print {
body {
height: auto;
}
}
Tuve el mismo problema y cambié la posición de la position:relative a la position: absolute con height: 100% desde la parte superior div hasta la parte inferior.
Yo estaba teniendo el mismo problema. Resulta que la etiqueta raíz tenía display: flex on it. Después de cambiar esto para display: block , se mostró el resto del contenido. Recomiendo ir a su árbol DOM y comprobar cada atributo de display .
para mí (bootstrap 4) la solución era
.row {
display: block;
}