Angular Exportação em Grade para Excel e Serviço PDF

    Seja seu público precisando de uma planilha para análises mais profundas ou de um PDF polido que possam compartilhar imediatamente, os exportadores Ignite UI ajudam você a entregar o arquivo certo do IgxGrid em segundos. Injete oIgxExcelExporterService ouIgxPdfExporterService, chame o respectivoexport /export método, e o componente cuida do restante — desde honrar filtros e ordenar até moldar o formato de saída.

    As seções abaixo explicam configuração, padrões de uso e dicas para personalizar cada exportação para que seus usuários recebam dados prontos para consumo, independentemente do tipo de arquivo que prefiram.

    Angular Excel Exporter Example

    Este exemplo ao vivo demonstra o fluxo padrão de exportação em Excel e PDF para a Grade — dados vinculados, dois botões de exportação (Excel e PDF) e os arquivos resultantes.xlsx​.pdf com filtragem e ordenação preservados. Compartilhe com stakeholders que queiram pré-visualizar a experiência antes de inseri-la em sua aplicação.

    Exporting Grid's Data

    Colocar os exportadores no seu projeto leva apenas algumas linhas de código. Siga estes passos e você terá serviços reutilizáveis que podem criar saídas em Excel ou PDF sob demanda:

    1. Importe oIgxExcelExporterService and/ouIgxPdfExporterService no seu módulo raiz.
    2. Injete o exportador que você precisar e chame o métodoexport dele quando o usuário solicitar um arquivo.
    // component.ts
import { IgxExcelExporterService, IgxPdfExporterService } from 'igniteui-angular/grids/core';
// import { IgxExcelExporterService, IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package

...

private excelExportService = inject(IgxExcelExporterService);
private pdfExportService = inject(IgxPdfExporterService);
    Note

    Na v12.2.1 e posteriores,IgxExcelExporterService é fornecido na raiz e não precisa ser registrado noproviders array. O exportador PDF foi introduzido em versões posteriores e está disponível como um serviço injetável sem nenhuma configuração adicional.

    Para iniciar um processo de exportação, você pode usar o manipulador de um botão no modelo do seu componente.

    <igx-grid #grid [data]="localData" [autoGenerate]="true"></igx-grid>
<button (click)="exportButtonHandler()">Export IgxGrid to Excel</button>
<button (click)="exportPdfButtonHandler()">Export IgxGrid to PDF</button>

    Você pode acessar qualquer um dos serviços exportadores definindo-o como uma dependência de construtor e permitindo que Angular forneça uma instância. Chamar o método compartilhadoexport inicia o download respeitando automaticamente o estado do componente, as linhas selecionadas e as regras de formatação.

    Aqui está o código que executará ambos os processos de exportação no arquivo typescript do componente:

    // component.ts
import { IgxExcelExporterService, IgxExcelExporterOptions, IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular/grids/core';
import { IgxGridComponent } from 'igniteui-angular/grids/grid';

@ViewChild('grid') public grid: IgxGridComponent;

private excelExportService = inject(IgxExcelExporterService);
private pdfExportService = inject(IgxPdfExporterService);

public exportButtonHandler() {
  this.excelExportService.export(this.grid, new IgxExcelExporterOptions('ExportedDataFile'));
}

public exportPdfButtonHandler() {
  this.pdfExportService.export(this.grid, new IgxPdfExporterOptions('ExportedDataFile'));
}

    Depois de conectado, pressionar os respectivos botões baixa arquivos nomeadosExportedDataFile.xlsx ouExportedDataFile.pdf preenchidos com a visualização atual da Grade. Você pode trocar nomes de arquivos amigáveis para o cliente, adicionar carimbos de data e hora ou exibir um toast de sucesso para que os usuários saibam que a exportação foi concluída.

    Export All Data

    Grandes conjuntos de dados remotos frequentemente carregam página por página ou sob demanda, o que significa que a Grade pode não ter todos os registros disponíveis quando o usuário clica em Exportar. Para garantir um livro de exercícios completo, hidrate o exportador com a coleta completa de dados antes de iniciar o processo. OexportData helper contorna o componente e funciona diretamente contra objetos simples, então você pode reutilizar a mesma rotina para exportações agendadas ou downloads apenas de administrador.

    public exportButtonHandler() {
  this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions('ExportedDataFile'));
}
    Tip

    Ao oferecer downloads em PDF para dados remotos, considere buscar primeiro o conjunto completo de dados e depois chamarexport para que o documento espelhe as expectativas do usuário.

    Export Grouped Data

    Agrupar é uma forma popular de resumir segmentos de clientes, categorias de produtos ou períodos financeiros antes de compartilhar os resultados. O exportador preserva a hierarquia exata de agrupamento que está atualmente aplicada à Grade, então seus destinatários veem a mesma divisão que você vê no navegador. Basta agrupar por uma ou mais colunas e acionar a exportação — nenhuma configuração extra é necessária.

    Se precisar de dados planos no arquivo exportado, limpe o agrupamento antes de chamarexport ou manuseie orowExporting evento para remodelar a saída.

    Exemplo:

    Export Multi Column Headers Grid

    Dashboards frequentemente dependem de cabeçalhos de múltiplas colunas para adicionar contexto — pense em uma faixa "Q1/Q2/Q3" acima das colunas individuais dos meses. O exportador espelha essa estrutura para que os usuários de planilha entendam imediatamente a lógica de agrupamento. Se seu fluxo de trabalho downstream preferir nomes simples de colunas, inverta o Opção do exportador ignorarCabeçalhosMultiColumn flag paratrue e a saída incluirá apenas os cabeçalhos das folhas.

    Note

    A Grid exportada não será formatada como uma tabela, pois as tabelas do Excel não oferecem suporte a vários cabeçalhos de linha.

    Export Grid with Frozen Column Headers

    Folhas longas podem se tornar difíceis de ler quando a linha de cabeçalhos sai da vista. Ativar cabeçalhos congelados mantém o contexto chave — como "Cliente" ou "Total da Fatura" — visível no topo da planilha enquanto seus usuários exploram os dados mais abaixo. Alterne o Opção do exportador FreezeHeaders Sinalize paratrue antes de ligarexport e o serviço cuidará do resto.

    public exportButtonHandler() {
    const exporterOptions = new IgxExcelExporterOptions('ExportedDataFile');
    exporterOptions.freezeHeaders = true;
    this.excelExportService.export(this.grid, exporterOptions);
}

    Exportações de PDF incluem automaticamente a linha de cabeçalho da coluna no topo do documento, para que os leitores mantenham o mesmo contexto ao abrir ou imprimir o arquivo.

    Customizing the Exported Content

    A maioria das equipes personaliza as exportações antes de compartilhá-las: escondendo colunas de uso interno, renomeando cabeçalhos ou pulando linhas que se aplicam apenas aos administradores. Ambos os serviços exportadores expõem eventos que permitem interceptar cada linha ou coluna e decidir como ela deve aparecer no arquivo. AssinecolumnExporting erowExporting faça ajustes de última hora — configurecancel = true para omitir um item ou ajustar os argumentos do evento para atualizar valores em tempo real.

    O exemplo a seguir excluirá uma coluna da exportação se seu cabeçalho for "Idade" e se seu índice for 1:

    // component.ts

this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
  if (args.header == 'Age' && args.columnIndex == 1) {
      args.cancel = true;
  }
});
this.excelExportService.export(this.grid, new IgxExcelExporterOptions('ExportedDataFile'));

    Quando você exporta dados do componente Grid, os serviços automaticamente respeitam a ordenação, filtragem, resumos e colunas ocultas para que o arquivo reflita o que o usuário vê atualmente. Precisa do conjunto de dados completo em vez disso? Ative ou inclua linhas filtradas, colunas ocultas ou metadados personalizados, as flagsIgxExcelExporterOptions​IgxPdfExporterOptions relevantes.

    Known Limitations

    Antes de enviar exportações para usuários de produção, revise as seguintes restrições da plataforma para definir expectativas e fornecer orientações úteis dentro do seu app.

    Limitação Descrição
    Tamanho máximo da planilha O tamanho máximo da folha de cálculo suportado pelo Excel é de 1.048.576 linhas por 16.384 colunas. Considere dividir exportações extremamente grandes por intervalo de datas ou segmento para se manter dentro desses limites.
    Estilo de célula O serviço exportador do Excel não suporta exportar um estilo personalizado aplicado diretamente a um componente de célula. Nesses cenários, recomendamos usar a Biblioteca Excel mais rica para formatação detalhada.
    Layouts PDF amplos Grades muito largas podem forçar colunas do PDF a encolherem para caber na página. Aplique larguras de coluna ou oculte campos de baixa prioridade antes de exportar para manter o documento legível.

    API References

    Os serviços Excel e PDF Exporter têm algumas APIs adicionais para explorar, listadas abaixo.

    Componentes adicionais que foram usados:

    Additional Resources

    Nossa comunidade é ativa e sempre receptiva a novas ideias. Os links abaixo conectam você a exemplos, respostas da comunidade e a equipe de engenharia.