Estilos de impressão

O mecanismo de temas Ignite UI for Angular fornece alguns estilos de impressão padrão, que garantem que nossos componentes tenham pelo menos o mínimo necessário para ter a mesma aparência no papel como aparecem na página da Web.

How to make use of the printing styles

Para garantir que os componentes fiquem totalmente visíveis no papel, você precisa se certificar de que eles são do mesmo tamanho ou menores que o documento para impressão, caso contrário, eles serão cortados.

Pelo default​ ​printing styles são incorporados no compiled CSS. Se você não planeja imprimir, sugerimos que você os desative para reduzir o tamanho do CSS de saída.

Você pode fazer isso em seu arquivo de tema SCSS:

@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 a v13.2, decidimos não ocultar nenhum componente por padrão, pois não sabemos quais partes você deseja que fiquem visíveis no papel, deixamos isso para você decidir.

Para remover uma parte ou um componente inteiro da página impressa, você pode adicionar a classe .igx-no-print ao elemento/componente que você não deseja imprimir, ou se você não tiver acesso ao DOM, você pode direcionar diretamente essa tag ou classe de elemento e definir sua exibição: nenhum.

Digamos que você não consiga' acessa um botão no DOM para colocá-lo.igx-no-print. Você ainda pode ocultar esse botão dos estilos de impressão usando SCSS.

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

Aqui, @media impressão é usada para garantir que os estilos que você escreve dentro só tenham efeito durante a impressão.

Se você quiser imprimir em preto e branco, você pode usar.igx-bw-print a classe em qualquer elemento e esse elemento e tudo dentro dele ficará preto e branco quando impresso.

Para imprimir, igx-grid recomendamos usar o export to excel recurso ou fazer uma captura de tela da grade e imprimi-la.