imprimir sección con angular y conservar los estilos css

Iniciado por Beginner Web, 22 Agosto 2020, 05:41 AM

0 Miembros y 1 Visitante están viendo este tema.

Beginner Web

7w7

WHK

Si puedes, debes crear un css media print que oculte todo menos el contenido y disponga el contenido de manera totalmente limpia eliminando todas las imagenes de fondo, después solo llamas a print().

Pudes hacerlo en un componente de manera directa, asi no necesitas globalizar el css, solo le importas el css en tu carpeta del componente y ya.

Mira, dale un vistazo a esto: https://timdeschryver.dev/blog/print-css-with-angular

Recuerda que esto solo sirve para una impresión desde el navegador, no desde el servidor ni una exportación a algo no estandar como un pdf.

Saludos.

Beginner Web

#2
Muy interesante, me sirvió de mucho ahora me falta quitar el header, footer y redimencionar el ancho de la pagina para que salga bien el PDF.
Esto tengo en el app.component.html

Código (html4strict) [Seleccionar]
<div class="container-fluid">

   <app-header>
   </app-header>

   <router-outlet>
   </router-outlet>

   <app-footer>
   </app-footer>

</div>



Código (css) [Seleccionar]
@media print {
    app-header,
    app-footer,
    button,
    .derecho:before,
    .foot:before {
        display: none !important;
    }
    .print {
        margin: 0cm;
    }
}

:rolleyes:
7w7

WHK

Por estandar no puedes utilizar caracteres no alfanuméricos en los nombres de las etiquetas, excepto los dos puntos para las etiquetas especiales.

Beginner Web

Gracias, lo he logrado, casí me voy a dormir y al último momento funcionó era de sacar la visibilidad pero en esos componentes o sea volver a escribir el @media print{} en el componente que no quiero que salga. Me siento una 100tifik  ;-) 
7w7