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.

아래 섹션에서는 설정, 사용 패턴, 그리고 사용자가 어떤 파일 형식이든 즉시 사용할 수 있는 데이터를 받을 수 있도록 각 내보내기를 맞춤화하는 팁을 안내합니다.

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

익스포터를 프로젝트에 넣는 데는 몇 줄의 코드만 필요합니다. 다음 단계를 따르면 주문형 엑셀 또는 PDF 출력물을 생성할 수 있는 재사용 가능한 서비스를 이용할 수 있습니다:

1. 루트 모듈에서 and/또는IgxExcelExporterService 임포트하세요IgxPdfExporterService.
2. 필요한 익스포터를 인젝트하고 사용자가 파일을 요청할 때 그export 메서드를 호출하세요.

// 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

v12.2.1 이후IgxExcelExporterService 에서는 루트 형태로 제공되며 배열에providers 등록할 필요가 없습니다. PDF 익스포터는 이후 버전에서 도입되었으며, 추가 설정 없이 인젝터블 서비스로 제공됩니다.

내보내기 프로세스를 시작하려면 구성 요소 템플릿의 버튼 핸들러를 사용할 수 있습니다.

<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>

두 가지 익스포터 서비스 중 하나에 생성자 의존성으로 정의하고 인스턴스를 제공하게 하여 Angular 접근할 수 있습니다. 공유export 메서드를 호출하면 자동으로 구성 요소 상태, 선택된 행, 서식 규칙을 존중하면서 다운로드가 시작됩니다.

다음은 컴포넌트의 typescript 파일에서 두 가지 내보내기 프로세스를 실행하는 코드입니다:

// 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

원격 데이터를 위한 PDF 다운로드를 제공할 때는 먼저 전체 데이터셋을 가져온 후 사용자가 기대하는 문서를 반영하도록 호출export 하는 것을 고려하세요.

Export Multi Column Headers Grid

대시보드는 종종 여러 열 헤더를 사용해 맥락을 더하는데, 예를 들어 개별 월 열 위에 "Q1/Q2/Q3" 밴드를 두는 것과 같습니다. 익스포터는 이 구조를 반영하여 스프레드시트 사용자가 즉시 그룹 로키를 이해할 수 있습니다. 만약 하류 워크플로우에서 단순한 열 이름을 선호한다면, 익스포터 옵션 ignoreMultiColumnHeaders 플true 래그를 하면 출력은 리프 헤더만 포함합니다.

Note

Excel 테이블은 여러 행 머리글을 지원하지 않으므로 내보낸 계층형 그리드는 테이블 형식으로 지정되지 않습니다.

Note

행 아일랜드에 있는 다중 열 머리글의 내보낸 확장 상태는 항상 초기 상태입니다.

Export Grid with Frozen Column Headers

긴 종이는 헤더 행이 화면에서 스크롤되면 읽기 어려워질 수 있습니다. 고정된 헤더를 활성화하면 "고객"이나 "청구서 총액" 같은 핵심 맥락이 워크시트 상단에 표시되고, 사용자는 더 아래쪽 데이터를 탐색할 수 있습니다. 토글 익스포터 옵션 freeze헤더 전화true 하기 전에 에export 플래그를 그라고, 그러면 서비스가 나머지를 처리해 줍니다.

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

PDF 내보내기에는 문서 상단에 열의 헤더 행이 자동으로 포함되므로, 리더가 파일을 열거나 인쇄할 때 동일한 맥락을 유지할 수 있습니다.

Customizing the Exported Content

대부분의 팀은 공유하기 전에 내보내기를 맞춤화합니다: 내부 사용 열을 숨기거나, 헤더 이름을 바꾸거나, 관리자에게만 적용되는 행을 건너뛰는 식입니다. 두 익스포터 서비스 모두 모든 행이나 열을 가로채고 파일 내 어떻게 나타날지 결정할 수 있는 이벤트를 제공합니다.columnExporting 구독 및rowExporting 마지막 순간 조정을 할 수 있습니다—항목을 생략하거나 이벤트 인자를 조정하여 값을 실시간으로 업데이트하도록 설정cancel = true 하세요.

다음 예에서는 헤더가 "Age"이고 인덱스가 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

내보내기를 프로덕션 사용자에게 배송하기 전에 다음 플랫폼 제약 조건을 검토하여 기대치를 설정하고 앱 내에서 유용한 지침을 제공할 수 있습니다.

한정	설명
계층 수준	익스포터는 최대 8단계의 계층 구조를 지원합니다. 더 깊은 구조가 필요하다면, 데이터를 평탄화하거나 하위 집합을 내보내서 파일을 읽기 쉽게 유지하세요.
최대 워크시트 크기	엑셀이 지원하는 최대 워크시트 크기는 1,048,576행, 16,384열입니다. 이 제한을 유지하기 위해 매우 큰 수출품을 날짜 범위나 세그먼트별로 분할하는 것을 고려하세요.
고정된 열 내보내기	In the exported Excel file, pinned columns are not frozen but preserve their order. If freezing is critical, adjust the sheet manually after export.
셀 스타일링	엑셀 익스포터 서비스는 셀 컴포넌트에 직접 적용한 맞춤 스타일을 내보내는 것을 지원하지 않습니다. 이런 상황에서는 세밀한 포맷팅을 위해 더 풍부한 Excel 라이브러리를 사용하는 것을 권장합니다.
와이드 PDF 레이아웃	매우 넓은 격자는 PDF 열을 페이지에 맞게 축소하게 만들 수 있습니다. 문서를 읽기 쉽게 유지하기 위해 내보내기 전에 열의 너비를 적용하거나 우선순위가 낮은 필드를 숨기세요.

API References

엑셀과 PDF 익스포터 서비스에는 아래에 소개된 몇 가지 추가 API가 있습니다.

• IgxExcelExporterService API
• IgxExcelExporterOptions API
• IgxPdfExporterService API
• IgxPdfExporterOptions API

사용된 추가 구성요소:

• IgxHierarchicalGridComponent API
• IgxHierarchicalGridComponent Styles

Additional Resources

우리 커뮤니티는 활발하고 항상 새로운 아이디어를 환영합니다. 아래 링크들은 샘플, 커뮤니티 답변, 그리고 엔지니어링 팀과 연결해 줍니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular