Angular 트리 그리드 내보내기 Excel 및 PDF 서비스

청중이 더 깊은 분석을 위한 스프레드시트가 필요하든, 바로 공유할 수 있는 다듬어진 PDF가 필요하든, Ignite UI 내보내기는 IgxTreeGrid에서 몇 초 만에 올바른 파일을 전달할 수 있도록 도와줍니다. orIgxExcelExporterService를IgxPdfExporterService 주입하고 대응export​export /메서드를 호출하면, 컴포넌트가 필터 존중, 정렬부터 출력 포맷 형성까지 나머지 부분을 처리합니다.

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

Angular Excel Exporter 예제

이 실시간 예제는 트리 그리드의 표준 엑셀 및 PDF 내보내기 워크플로우를 보여줍니다—바인드 데이터, 두 개의 내보내기 버튼(엑셀과 PDF), 그리고 필터링 및 정렬 상태를 보존한 결과.xlsx​.pdf 파일들. 경험을 미리 경험하고 싶은 이해관계자들과 공유하여 애플리케이션에 반영하세요.

트리 그리드 데이터 내보내기

익스포터를 프로젝트에 넣는 데는 몇 줄의 코드만 필요합니다. 다음 단계를 따르면 주문형 엑셀 또는 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);

메모

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

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

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

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

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

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

@ViewChild('treeGrid') public treeGrid: IgxTreeGridComponent;

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

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

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

배선이 완료되면 해당 버튼을 누르면 현재 트리 그리드 뷰로 이름ExportedDataFile.xlsx이 붙거나ExportedDataFile.pdf 채워진 파일을 다운로드합니다. 고객 친화적인 파일 이름을 바꾸거나, 타임스탬프를 추가하거나, 성공 축배 글을 표시해 사용자가 내보내기가 완료되었음을 알 수 있습니다.

모든 데이터 내보내기

대용량 원격 데이터셋은 페이지별로 또는 주문 시 로드되는 경우가 많아, 사용자가 내보내기를 클릭할 때 트리 그리드에 모든 레코드가 포함되어 있지 않을 수 있습니다. 완전한 워크북을 보장하기 위해 작업 시작 전에 전체 데이터 수집을 익스포터에 수분 공급하세요. 헬퍼는exportData 컴포넌트를 우회하고 일반 객체에 직접 대응하기 때문에, 예약된 내보내기나 관리자 전용 다운로드에 같은 루틴을 재사용할 수 있습니다.

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

Tip

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

다중 열 머리글 그리드 내보내기

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

메모

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

고정된 열 헤더가 있는 그리드 내보내기

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

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

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

내보낸 콘텐츠 사용자 정의

대부분의 팀은 공유하기 전에 내보내기를 맞춤화합니다: 내부 사용 열을 숨기거나, 헤더 이름을 바꾸거나, 관리자에게만 적용되는 행을 건너뛰는 식입니다. 두 익스포터 서비스 모두 모든 행이나 열을 가로채고 파일 내 어떻게 나타날지 결정할 수 있는 이벤트를 제공합니다.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.treeGrid, new IgxExcelExporterOptions('ExportedDataFile'));

트리 그리드 컴포넌트에서 데이터를 내보낼 때, 서비스는 자동으로 정렬, 필터링, 요약, 숨겨진 열을 존중하여 사용자가 현재 보는 파일을 반영합니다. 전체 데이터셋이 필요하신가요? 관련 플래그는IgxExcelExporterOptions​IgxPdfExporterOptions 필터링된 행, 숨겨진 열, 또는 사용자 지정 메타데이터를 포함하도록 토글하세요.

알려진 제한 사항

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

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

API 참조

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

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

사용된 추가 구성요소:

• IgxTreeGridComponent API
• IgxTreeGridComponent Styles

추가 리소스

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

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