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

    Ignite UI 엑셀과 PDF 익스포터 서비스는 IgxPivotGrid를 사용자가 화면에서 보는 것과 똑같이 계층적 레이아웃과 요약을 포함해 다룹니다. orIgxExcelExporterService를IgxPdfExporterService 주입하고, 적절한export​export 메서드를 호출한 뒤 서비스가 최종 문서를 생성하도록 하세요.

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

    Angular Excel Exporter Example

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

    Exporting Pivot 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-pivot-grid #pivotGrid [data]="localData" [pivotConfiguration]="pivotConfig"></igx-pivot-grid>
<button (click)="exportButtonHandler()">Export IgxPivotGrid to Excel</button>
<button (click)="exportPdfButtonHandler()">Export IgxPivotGrid to PDF</button>

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

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

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

@ViewChild('pivotGrid') public pivotGrid: IgxPivotGridComponent;

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

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

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

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

    Note

    Excel의 확장/축소 표시기는 피벗 그리드의 마지막 차원의 계층 구조를 기반으로 표시됩니다.

    Note

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

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

    Customizing the Exported Content

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

    다음 예에서는 헤더가 "판매량"인 경우 모든 열을 내보내기에서 제외합니다.

    // component.ts

this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
    if (args.header == 'Amount of Sale') {
        args.cancel = true;
    }
});
this.excelExportService.export(this.pivotGrid, new IgxExcelExporterOptions('ExportedDataFile'));

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

    Known Limitations

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

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

    API References

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

    사용된 추가 구성요소:

    Additional Resources

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