Estilos de impresión

El motor de temas de Ignite UI for Angular proporciona algunos estilos de impresión predeterminados, que aseguran que nuestros componentes tengan al menos el mínimo indispensable para verse igual en papel que en la página web.

How to make use of the printing styles

Para asegurarse de que los componentes sean completamente visibles en el papel, debe asegurarse de que sean del mismo tamaño o más pequeños que el documento para imprimir; de lo contrario, se cortarán.

Por default los printing styles se incorporan en el compiled CSS. Si no planea imprimir, le sugerimos que los desactive para reducir el tamaño del CSS generado.

Puedes hacerlo en el archivo SCSS de tu tema:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

// Turn the print styles off by setting the $print-layout param to false.
@include core($print-layout: false)

// Add the theme and the palette.
@include theme($default-palette);
scss

Desde v13.2 decidimos no ocultar ningún componente de forma predeterminada, ya que no sabemos qué partes desea que sean visibles en el papel, lo dejamos para que usted decida.

Para eliminar una pieza o un componente completo de la página impresa, puede agregar la clase .igx-no-print al elemento/componente que no desea imprimir, o si no tiene acceso al DOM puede apuntar directamente a esa etiqueta o clase de elemento y configurar su visualización: ninguna.

Digamos que no puedes acceder a un botón en el DOM para ponerle.igx-no-print. Aún puedes ocultar ese botón para que no se impriman estilos usando SCSS.

@media print {
    [igxButton] {
        display: none;
    }
}
scss

Aquí se utiliza @media print para garantizar que los estilos que escriba dentro solo surtan efecto durante la impresión.

Si desea imprimir en blanco y negro, puede usar la clase.igx-bw-print en cualquier elemento y ese elemento y todo lo que contiene se volverá blanco y negro cuando se imprima.

Para imprimir el igx-grid recomendamos utilizar la función export to excel o hacer una captura de pantalla del grid e imprimirla.