Angular Hierarchical Grid Export to Excel and PDF Service

    The Ignite UI Excel and PDF Exporter services treat the IgxHierarchicalGrid exactly like your users see it on screen—complete with hierarchical layouts and summaries. Inject the IgxExcelExporterService or IgxPdfExporterService, call the appropriate export/export method, and let the service generate the final document.

    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

    This live example demonstrates the standard Excel and PDF export workflow for the Hierarchical Grid—bound data, two export buttons (Excel and PDF), and the resulting .xlsx and .pdf files with preserved filtering and sorting state. Share it with stakeholders who want to preview the experience before wiring it into their application.

    Exporting Hierarchical 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-hierarchical-grid #hierarchicalGrid [data]="localData" [autoGenerate]="true"></igx-hierarchical-grid>
<button (click)="exportButtonHandler()">Export IgxHierarchicalGrid to Excel</button>
<button (click)="exportPdfButtonHandler()">Export IgxHierarchicalGrid 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 { IgxHierarchicalGridComponent } from 'igniteui-angular/grids/hierarchical-grid';

@ViewChild('hierarchicalGrid') public hierarchicalGrid: IgxHierarchicalGridComponent;

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

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

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

    Once wired up, pressing the respective buttons downloads files named ExportedDataFile.xlsx or ExportedDataFile.pdf populated with the current Hierarchical Grid view. You can swap in customer-friendly file names, append timestamps, or surface a success toast so users know their export has completed.

    Export All Data

    Large, remote datasets often load page-by-page or on demand, which means the Hierarchical Grid might not have every record available when the user clicks Export. To guarantee a complete workbook, hydrate the exporter with the full data collection before starting the process. The exportData helper bypasses the component and works directly against plain objects, so you can reuse the same routine for scheduled exports or admin-only downloads.

    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 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 Grade Hierárquica exportada não será formatada como uma tabela, pois as tabelas do Excel não oferecem suporte a vários cabeçalhos de linha.

    Note

    O estado de expansão exportado dos cabeçalhos de várias colunas nas ilhas de linha sempre estará em seu estado inicial.

    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.hierarchicalGrid, new IgxExcelExporterOptions('ExportedDataFile'));

    When you are exporting data from the Hierarchical Grid component, the services automatically respect sorting, filtering, summaries, and hidden columns so the file reflects what the user currently sees. Need the full dataset instead? Toggle the relevant flags on IgxExcelExporterOptions or IgxPdfExporterOptions to include filtered rows, hidden columns, or custom metadata.

    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
    Níveis hierárquicos O exportador suporta até 8 níveis de hierarquia. Se precisar de estruturas mais profundas, achate os dados ou exporte subconjuntos para manter o arquivo legível.
    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.
    Exportando colunas fixadas In the exported Excel file, pinned columns are not frozen but preserve their order. If freezing is critical, adjust the sheet manually after export.
    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.