elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Rompecabezas de Bitcoin, Medio millón USD en premios


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  imprimir sección con angular y conservar los estilos css
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: imprimir sección con angular y conservar los estilos css  (Leído 4,765 veces)
Beginner Web


Desconectado Desconectado

Mensajes: 634


youtu.be/0YhflLRE-DA


Ver Perfil
imprimir sección con angular y conservar los estilos css
« en: 22 Agosto 2020, 05:41 am »

eso quiero saber  :huh:


En línea

7w7
WHK
Moderador Global
***
Desconectado Desconectado

Mensajes: 6.605


Sin conocimiento no hay espíritu


Ver Perfil WWW
Re: imprimir sección con angular y conservar los estilos css
« Respuesta #1 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.


En línea

Beginner Web


Desconectado Desconectado

Mensajes: 634


youtu.be/0YhflLRE-DA


Ver Perfil
Re: imprimir sección con angular y conservar los estilos css
« Respuesta #2 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
  1. <div class="container-fluid">
  2.  
  3.    <app-header>
  4.    </app-header>
  5.  
  6.    <router-outlet>
  7.    </router-outlet>
  8.  
  9.    <app-footer>
  10.    </app-footer>
  11.  
  12. </div>


Código
  1. @media print {
  2.    app-header,
  3.    app-footer,
  4.    button,
  5.    .derecho:before,
  6.    .foot:before {
  7.        display: none !important;
  8.    }
  9.    .print {
  10.        margin: 0cm;
  11.    }
  12. }
:rolleyes:
« Última modificación: 24 Agosto 2020, 05:01 am por Beginner Web » En línea

7w7
WHK
Moderador Global
***
Desconectado Desconectado

Mensajes: 6.605


Sin conocimiento no hay espíritu


Ver Perfil WWW
Re: imprimir sección con angular y conservar los estilos css
« Respuesta #3 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.
En línea

Beginner Web


Desconectado Desconectado

Mensajes: 634


youtu.be/0YhflLRE-DA


Ver Perfil
Re: imprimir sección con angular y conservar los estilos css
« Respuesta #4 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  ;-) 
En línea

7w7
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
conservar cds y dvds
Software
ferdipd 2 3,286 Último mensaje 28 Abril 2007, 15:29 pm
por ferdipd
Cambiador de iconos en vb6 y conservar sección eof
Programación Visual Basic
pantera098 3 1,820 Último mensaje 10 Noviembre 2008, 15:19 pm
por ~~
Crear partición y conservar información.
Hardware
Embusterillo de bolsillo 1 2,461 Último mensaje 11 Enero 2011, 20:06 pm
por Aprendiz-Oscuro
Angular JS (Angular Material)
Desarrollo Web
carwen 3 3,714 Último mensaje 20 Junio 2016, 21:46 pm
por daniela Vega
Pongo dos estilos css con <link> y se me mezclan los estilos.solucion?
Desarrollo Web
Drakaris 2 2,489 Último mensaje 25 Julio 2017, 11:25 am
por Drakaris
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines