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

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

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

Angular Excel Exporter Example

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

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

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

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

// 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'));
}

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

Export All Data

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

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

Tip

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

Export Grouped Data

그룹화는 고객 세그먼트, 제품 카테고리 또는 재무 기간을 요약한 후 결과를 공유하는 인기 있는 방법입니다. 익스포터는 현재 그리드에 적용된 정확한 그룹 계층 구조를 유지하므로, 수신자가 브라우저에서 보는 것과 같은 분류를 볼 수 있습니다. 하나 이상의 열로 그룹화하고 내보내기를 트리거하기만 하면 추가 설정이 필요 없습니다.

내보내기 파일에 평면 데이터가 필요하다면, 호출export 전에 그룹을 지우거나 이벤트를rowExporting 처리해 출력을 재구성하세요.

본보기:

Export Multi Column Headers Grid

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

Note

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

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

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

Known Limitations

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

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

API References

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

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

사용된 추가 구성요소:

• IgxGridComponent API
• IgxGrid구성 요소 스타일

Additional Resources

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

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