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.

By default the printing styles are incorporated in the compiled CSS. If you are not planning to print, we suggest you turn them off in order to reduce the size of the outputted CSS.

You can do that in your theme SCSS file:

@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);

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.

In order to remove a piece or a whole component from the printed page, you can either add the class .igx-no-print to the element/component you don't want to print, or if you don't have access to the DOM you can directly target that element tag or class and set its display: none.

Let's say that you can't' accesses a button in the DOM to put .igx-no-print on it. You can still hide that button from printing styles using SCSS.

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

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

If you want to print in black and white you can use .igx-bw-print class on any element and that element and everything inside it will turn black & white when printed.

To print the igx-grid we recommend using the export to excel feature or making a screenshot of the grid and printing it.