tool - guardar cambios css chrome
Vista previa de impresión de Chrome diferente que en DEVTools (4)
He configurado una hoja de estilo de impresión y en Firefox se ve bien.
En Chrome, toda la página está rota en la vista previa de impresión (CTRL + P), pero si abro las herramientas de desarrollo de Chrome (F12) y uso la función de emulate CSS media , la página se ve correcta, como en Firefox.
Lo extraño es que si abro la vista previa de impresión nuevamente, una vez que haya activado la opción de emulación una vez, ¡la página se ve correcta en la vista preliminar! Incluso si solo activo y luego desactivo la opción de emulación, ¡la vista previa de impresión siempre es correcta después de hacer eso!
Mi print.css comienza con
@media print { ... }
y se incluye en la página <head> así:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
He intentado eliminar el media="print" pero nada cambia.
En su hoja de estilo de impresión, necesita agregar lo siguiente:
* {
transition: none !important;
}
Parece que Chrome no deshabilita la propiedad de transición para los medios de impresión.
Here es donde encontré la respuesta.
Me encontré exactamente con el mismo problema de romper la cabeza y he podido solucionarlo.
En mi caso, el problema se debió al uso de una @ font-face personalizada para el CSS ''imprimir'' que no usé en el CSS ''pantalla''.
Parece que el navegador no carga la @ fuente personalizada de la hoja de estilos de impresión para la primera vista previa y hace que la página esté más o menos vacía. Se renderizaría perfectamente en la segunda vista previa de impresión.
Mi solución fue cargar la misma regla @ font-face de la pinta css también en la pantalla css. De esa manera, la fuente ya está cargada por el navegador al ver la vista previa de impresión y todo funciona como un encanto.
Para agregar a la respuesta de Ustice y al comentario de Jeeva Jsb: es posible que tenga que permitir que el DOM se vuelva a enviar después de aplicar la transition: none !important Regla transition: none !important . Logré esto agregando una clase de CSS print al cuerpo antes de imprimir la página mediante programación:
CSS:
body.print * {
transition: none !important;
}
JS (usando jQuery):
$(''body'').addClass(''print'');
setTimeout(function() {
window.print();
}, 0);
No olvide eliminar la clase de print una vez que su usuario haya terminado de imprimir la página. (Vea cómo detectar el final de window.print () ).
Si no ha encontrado una solución en las respuestas dadas, entonces tengo algo que decir al respecto:
en Chrome La opción de print en DEVTools en emulation css media es solo para aplicar las reglas de impresión css a la página, para propósitos de prueba, no tiene en cuenta todas las otras cosas que acompañan a la impresión, muestra la vista previa de impresión pero a veces no se muestra La página de impresión como vista previa de impresión real.
si está usando bootstrap, entonces si está usando solo col-md-* o col-sm-* no funcionará, pero si usa col-xs-* entonces funcionará porque el problema es que la página en sí es pequeña en términos de píxeles, por lo que bootstrap cree que necesita aplicar el estilo xs.
Y los diferentes navegadores se comportan de manera diferente al imprimir la página. La única forma óptima de probar la impresión es realmente imprimiendo o imprimiendo en pdf.