Test Foro de elhacker.net SMF 2.1

Programación => Desarrollo Web => Mensaje iniciado por: Beginner Web en 22 Agosto 2020, 05:41 AM

Título: imprimir sección con angular y conservar los estilos css
Publicado por: Beginner Web en 22 Agosto 2020, 05:41 AM
eso quiero saber  :huh:
Título: Re: imprimir sección con angular y conservar los estilos css
Publicado por: WHK en 22 Agosto 2020, 07:31 AM
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.
Título: Re: imprimir sección con angular y conservar los estilos css
Publicado por: Beginner Web en 24 Agosto 2020, 03:20 AM
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:
Título: Re: imprimir sección con angular y conservar los estilos css
Publicado por: WHK en 24 Agosto 2020, 18:34 PM
Por estandar no puedes utilizar caracteres no alfanuméricos en los nombres de las etiquetas, excepto los dos puntos para las etiquetas especiales.
Título: Re: imprimir sección con angular y conservar los estilos css
Publicado por: Beginner Web en 27 Agosto 2020, 04:01 AM
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  ;-)