[SOLUCIONADO] Impresión con Bootstrap

[KATHYU]

Buen día.

Me esta sucediendo algo, si yo veo el sistema con un buen monitor sale así en web

Y así en impresión


Ahi todo bien, pero si yo la veo con un monitor CRT

La impresión ya se ve diferente

Y lo peor es al verlo en un dispositivo mas pequeño

La impresión se ve horrible


Saben que hacer para evitar eso ??

Datos:
- En efecto tengo monitores CRT en los cuales el sistema se veria como en la segunda imagen.
- La imagen 1,3,5 nunca se ven, porque de un solo sale la vista de impresión, solo le he quitado el script de imprimir para tener una mejor comprensión del problema. El usuario solo pincha en el boton imprimir y le salen las imágenes 2,4 ó 6
- La configuración de los <th> ya las toque y al ponerle numero de columnas, es igual, mientras la pantalla sea chica, la vista de impresión se junta y distorsiona el reporte

Alguna idea de que hacer ??

[KATHYU]

Estoy intentando adecuar este ejemplo a lo que quiero pero no funciona con toda la pagina, puse un div que encierra todo, pero el resultado es el mismo que la imagen 6

Pero al menos ya tengo una idea de como ir probando, mañana veré si lo adecuo mejor a mi propósito, si saben de algo que me ayude mas, favor avisar

[franciscomarin]

Aunque sea más engorroso... ¿porque no haces que se genere un PDF con el formato correcto y así evitas problemas con navegadores, resoluciones, dispositivos, etc.?

Si vas a utilizar mucho la impresión creo que es la mejor opción, poder exportarlo en PDF.

[KATHYU]

Iniciado por franciscomarin

Aunque sea más engorroso... ¿porque no haces que se genere un PDF con el formato correcto y así evitas problemas con navegadores, resoluciones, dispositivos, etc.?

Si vas a utilizar mucho la impresión creo que es la mejor opción, poder exportarlo en PDF.

Ummm pensándolo bien, tiene razón sabe

Pero no quiero que BS me derrote, si no encuentro otra opción, tendré que hacer el PDF con PHP

[Rafael]

Un momento porvafore...

¿Los usuarios van a picar el botón generar PDF? o por costumbre van a mandar imprimir y ya.

El problema que noto es que simplemente el logotipo (o lo que esté junto a él) está ocupando un espacio fijo. Habrá que revisar simplemente ese pedacito.

No uso casi bootstrap, pero ese pedazo podrías ponerlo simplemente como un flexbox.

[KATHYU]

Iniciado por Rafael

Un momento porvafore...

¿Los usuarios van a picar el botón generar PDF? o por costumbre van a mandar imprimir y ya.

El problema que noto es que simplemente el logotipo (o lo que esté junto a él) está ocupando un espacio fijo. Habrá que revisar simplemente ese pedacito.

No uso casi bootstrap, pero ese pedazo podrías ponerlo simplemente como un flexbox.

Muy amable, y eso lo estuve pensando en este fin de semana, porque ahorita, los usuarios solo dan click en imprimir y listo, ya pueden enviarlo directo a la impresora, cuando ya genere el PDF, pues sera eso, generar un PDF y una de dos, o lo muestro en web, o lo descargo de manera automática y que después le den a imprimir y fin, cosa que casi no me parece.

Otra opción que pensé fue, dejar el botón imprimir como esta (ya que la mayoría usan monitores muy buenos) y agregar el botón de generar PDF, y que lo use el que lo necesite o el que quiera

Con lo del LOGO, no le veo problema, porque al final hasta lo puedo quitar, el problema es la tabla, que ahi si ya no se mete nada lo del logo y si ve en la imagen 6, la tabla de datos se ve HORRIBLE

Yo nunca he usado FlexBox aunque segun se, es algo similar a Bootstrap, me gustaria igual aprender pero por el momento mi problema es ese, si usted sabe que con Flexbox puedo resolver, buscare del tema o tal vez no abuso de su tiempo, y le pido un ejemplo rápido de impresión con flexbox

[Triby]

Y si solo ajustas el tamaño de la fuente?, creo que ese es el problema principal, porque la impresión se hace de acuerdo a lo que hay en pantalla; seguramente, ya impreso podrás ver que los textos salen enormes.

[KATHYU]

Iniciado por Triby

Y si solo ajustas el tamaño de la fuente?, creo que ese es el problema principal, porque la impresión se hace de acuerdo a lo que hay en pantalla; seguramente, ya impreso podrás ver que los textos salen enormes.

Su punto es correcto, en efecto el texto crece (lo acabo de comprobar) pero no solo el texto, si se fija en las imágenes 2 y 6 la tabla esta mas pequeña, o "engordada" y eso es, si no me equivoco porque como así esta el html (ver imagen 5) por tener una resolución/tamaño mas chico

Aun no le encuentro al problema de Bootstrap, ya baje mPDF (nunca lo he usado) para ver de todos modos la forma de crear el PDF, aunque me esta costanto, creo que me tocara con la vieja confiable FPDF

Triby, si quisiera poner las letras mas chicas en el tamaño sm de bootstrap (que es el que me esta dando el problema), tocaria hacerlo con una media query verdad ?? Solo he usado media query para el titulo de todas las paginas, pero cambiarle a todo el sitio, ummm tengo que verlo. Pruebo y publico mis resultados en un rato.

[Triby]

Si has trabajado diseños responsivos, verás que lo ideal es especificar un tamaño de letra para html y body, el resto lo aplicas con unidades relativas como em. En teoría, solo necesitarías una media query para modificar la fuente de html y body, todo lo demás se adaptará en relación a ella.

Finalmente, si el problema principal es la impresión, entonces podrías crear media query solo para ese efecto.

Código CSS:

@media print and (/* formato de impresión */) {
    /* Aquí los estilos necesarios */
}
 

Por cierto, tanto la captura de pantalla como de la vista de impresión, me parece que el texto es muy grande; de hecho, eso es lo que provoca saltos de línea y que la tabla no se vea como esperas.

[KATHYU]

Iniciado por Triby

Si has trabajado diseños responsivos, verás que lo ideal es especificar un tamaño de letra para html y body, el resto lo aplicas con unidades relativas como em. En teoría, solo necesitarías una media query para modificar la fuente de html y body, todo lo demás se adaptará en relación a ella.

Finalmente, si el problema principal es la impresión, entonces podrías crear media query solo para ese efecto.

Código CSS:

@media print and (/* formato de impresión */) {
    /* Aquí los estilos necesarios */
}
 

Por cierto, tanto la captura de pantalla como de la vista de impresión, me parece que el texto es muy grande; de hecho, eso es lo que provoca saltos de línea y que la tabla no se vea como esperas.

Buen día.

Triby, le informo que para evitar al usuario mas vueltas, decidi poner a trabajar las @media print y que gracias a ellas he logrado el resultado deseado. Lo que hice fue dejar el tamaño de las letras de la tabla en 0.9em lo cual hace que se vean muy bien, puse la tabla en table-condensed para reducir espacios, y el LOGO en efecto tenia un clavito por ahi, gracias a Rafael le puse el ojo y descubri un numero que hacia ese efecto feo en el Header.

El reporte quedo excelente, como siempre sois lo mejor de la web