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.
Pelosdefaultprinting styles estão incorporados nocompiled CSS. Se você não pretende imprimir, sugerimos desligá-los para reduzir o tamanho do CSS gerado.
Você pode fazer isso no seu arquivo de temaSCSS:
@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 peça ou um componente inteiro da página impressa, você pode adicionar a classe .igx-no-print ao elemento/componente que não deseja imprimir, ou, se não tiver acesso ao DOM, pode direcionar diretamente essa tag ou classe de elemento e definir sua exibição: Nenhum.
Digamos que você não consiga acessar um botão no DOM para colocar.igx-no-print nele. Você ainda pode esconder 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 quiser imprimir em preto e branco, pode usar.igx-bw-print classe em qualquer elemento e esse elemento e tudo dentro dele ficará preto e branco quando impresso.
Para imprimir,igx-grid recomendamos usar oexport to excel recurso ou fazer uma captura de tela da grade e imprimir.
GitHub