Estamos haciendo el desarrollo de un proyecto web, hemos finalizado la parte de maquetación y ahora vamos a adaptar la maqueta para impresión. La estructura está lista y los estilos específicos para impresión correctamente implementados, pero al pulsar el botón de imprimir te llevas la sorpresa: en la vista de impresión se ha perdido el diseño. Revisas una y otra vez el script que has preparado para la impresión pero todo parece estar en su sitio.
Pues sí, esto es algo que puede pasarte y de hecho si has llegado hasta aquí casi con toda seguridad te está pasando en este momento. Vamos a ver a continuación uno de los motivos que puede ocasionar este problema que te comentaba. Digo uno de los motivos porque puede haber varios, pero aquí voy a suponer que tu código es correcto y aún así no se previsualizan los estilos. Esto es importante que lo tengas en cuenta porque si hay un fallo en las etapas anteriores es posible que estés tratando de aplicar una solución que no va a servirte de mucho.
Retrocedamos unos pasos hasta la elaboración de nuestro JavaScript donde estamos usando el método print(). Según parece, algunos navegadores, especialmente los basado en la tecnología de Google Chrome tienen problemas para cargar los estilos antes de abrir la ventana de impresión. Esto da lugar a que la vista de impresión se muestre sin diseño alguno a pesar de que nuestra maqueta esté correctamente implementada.
Para asegurarnos que todo se cargue antes de mostrar la ventana, podemos introducir un retardo antes de ejecutar print(). De este modo cuando el usuario pulse sobre el botón de imprimir, le damos un poco de tiempo al navegador para que termine de leer el documento usando un setTimeout(), del siguiente modo por ejemplo:
setTimeout(function() {
ventana.print();
}, 300);
Como de entrada no puedo saber de qué modo estás imprimiendo y no hay dos códigos iguales, lo anterior tendrás que adaptarlo a tu script del modo que más creas conveniente.
Deja una respuesta