Excel 서비스로 Angular 트리 그리드 내보내기
Excel 내보내기 서비스는 IgxTreeGrid에서 데이터를 Excel로 내보낼 수 있습니다. 데이터 내보내기 기능은 IgxExcelExporterService
클래스에 캡슐화되어 있으며 데이터는 MS Excel 테이블 형식으로 내보내집니다. 이 형식을 사용하면 필터링, 정렬 등과 같은 기능을 사용할 수 있습니다. 이렇게 하려면 IgxExcelExporterService
의 export
메서드를 호출하고 IgxTreeGrid 구성 요소를 첫 번째 인수로 전달하여 그리드를 쉽게 내보내야 합니다.
Angular Excel Exporter 예제
import { Component, OnInit, ViewChild } from '@angular/core' ;
import { IgxTreeGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular' ;
import { ORDERS_DATA } from '../../../tree-grid/data/orders' ;
import { IgxPreventDocumentScrollDirective } from '../../../directives/prevent-scroll.directive' ;
import { NgIf } from '@angular/common' ;
@Component ({
selector : 'app-excel-export-tree-grid-sample' ,
styleUrls : ['./excel-export-tree-grid-sample.component.scss' ],
templateUrl : './excel-export-tree-grid-sample.component.html' ,
imports : [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxCellTemplateDirective, NgIf]
})
export class TreeGridExcelExportSample1Component implements OnInit {
@ViewChild ('igxTreeGrid1' , { static : true })
public igxTreeGrid1: IgxTreeGridComponent;
public data: any [];
public options = {
digitsInfo : '1.2-2' ,
currencyCode : 'USD'
};
public formatOptions = this .options;
constructor ( ) { }
public ngOnInit(): void {
this .data = ORDERS_DATA;
}
}
ts コピー <p class ="grid__wrapper" >
<igx-tree-grid #igxTreeGrid1 [igxPreventDocumentScroll ]="true" [data ]="data" [autoGenerate ]="false" height ="280px" width ="100%"
primaryKey ="ID" foreignKey ="ParentID" >
<igx-grid-toolbar >
<igx-grid-toolbar-actions >
<igx-grid-toolbar-exporter [exportExcel ]="true" [exportCSV ]="false" >
</igx-grid-toolbar-exporter >
</igx-grid-toolbar-actions >
</igx-grid-toolbar >
<igx-column field ="ID" header ="Order ID" >
</igx-column >
<igx-column field ="Name" header ="Order Product" >
</igx-column >
<igx-column field ="Category" header ="Category" >
</igx-column >
<igx-column field ="Units" header ="Units" [dataType ]="'number'" >
</igx-column >
<igx-column field ="UnitPrice" header ="Unit Price" [dataType ]="'currency'" [pipeArgs ]="formatOptions" [sortable ]="false" >
</igx-column >
<igx-column field ="Price" header ="Price" [dataType ]="'currency'" [pipeArgs ]="formatOptions" [sortable ]="false" >
</igx-column >
<igx-column field ="OrderDate" header ="Order Date" [dataType ]="'date'" >
</igx-column >
<igx-column field ="Delivered" header ="Delivered" [dataType ]="'boolean'" >
<ng-template igxCell let-cell ="cell" let-val >
<img *ngIf ="val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" title ="Delivered" alt ="Delivered" />
<img *ngIf ="!val" src ="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png" title ="Undelivered" alt ="Undelivered" />
</ng-template >
</igx-column >
</igx-tree-grid >
</p >
html コピー .grid__wrapper {
padding-top : 16px ;
width : 98% !important ;
margin : 0 auto;
padding-left : 1% ;
padding-right : 1% ;
}
.exportButton {
margin-top : 5px ;
}
scss コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
트리 그리드의 데이터 내보내기
IgniteUI Excel 내보내기 사용을 시작하려면 먼저 app.module.ts 파일에서 IgxExcelExporterService
가져오고 providers
배열에 서비스를 추가합니다.
import { IgxExcelExporterService } from 'igniteui-angular' ;
@NgModule ({
providers : [ IgxExcelExporterService ]
})
export class AppModule {}
typescript
v12.2.1 이상에서는 내보내기 서비스가 루트에서 제공됩니다. 즉, 더 이상 AppModule 공급자에서 이를 선언할 필요가 없습니다.
내보내기 프로세스를 시작하려면 구성 요소 템플릿의 버튼 핸들러를 사용할 수 있습니다.
<igx-tree-grid #treeGrid [data ]="localData" [autoGenerate ]="true" > </igx-tree-grid >
<button (click )="exportButtonHandler()" > Export IgxTreeGrid to Excel</button >
html
구성 요소의 생성자에서 IgxExcelExporterService
유형의 인수를 정의하여 익스포터 서비스에 액세스할 수 있으며 Angular 프레임워크는 서비스 인스턴스를 제공합니다. MS Excel 형식으로 일부 데이터를 내보내려면 익스포터 서비스의 export
메서드를 호출하고 IgxTreeGrid 구성 요소를 첫 번째 인수로 전달해야 합니다.
다음은 구성 요소의 TypeScript 파일에서 내보내기 프로세스를 실행하는 코드입니다.
import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular' ;
import { IgxTreeGridComponent } from 'igniteui-angular' ;
@ViewChild ('treeGrid' ) public treeGrid: IgxTreeGridComponent;
constructor (private excelExportService: IgxExcelExporterService ) {
}
public exportButtonHandler ( ) {
this .excelExportService.export(this .treeGrid, new IgxExcelExporterOptions('ExportedDataFile' ));
}
typescript
모든 것이 순조롭게 진행되면 IgxTreeGrid 구성요소와 그 아래에 버튼이 표시됩니다. 버튼을 누르면 내보내기 프로세스가 시작되고 브라우저는 MS Excel 형식의 트리 그리드 구성 요소의 데이터가 포함된 "ExportedDataFile.xlsx"라는 파일을 다운로드합니다.
모든 데이터 내보내기
페이징 과 같은 원격 작업을 사용 중이고 그리드가 모든 데이터에 액세스할 수 없는 경우가 있습니다. 이러한 경우에는 Excel 내보내기 서비스를 사용하고 가능한 경우 전체 데이터 수집을 전달하는 것이 좋습니다. 예:
public exportButtonHandler ( ) {
this .excelExportService.exportData(this .localData, new IgxExcelExporterOptions('ExportedDataFile' ));
}
ts
다중 열 머리글 그리드 내보내기
이제 다중 열 헤더가 정의된 트리 그리드를 내보낼 수 있습니다. 모든 헤더는 트리 그리드에 표시되므로 내보낸 Excel 파일에 반영됩니다. 내보낸 데이터에서 정의된 다중 열 헤더를 제외하려면 내보내기 옵션인 ignoreMultiColumnHeaders를 true
로 설정할 수 있습니다.
Excel 테이블은 여러 행 머리글을 지원하지 않으므로 내보낸 트리 그리드는 테이블 형식으로 지정되지 않습니다.
import { Component } from '@angular/core' ;
import { GridSelectionMode, IgxExporterEvent, IgxTreeGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxColumnGroupComponent } from 'igniteui-angular' ;
import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
import { FormsModule } from '@angular/forms' ;
@Component ({
selector : 'app-tree-grid-multi-column-headers-export-sample' ,
styleUrls : ['./tree-grid-multi-column-headers-export.component.scss' ],
templateUrl : './tree-grid-multi-column-headers-export.component.html' ,
imports : [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxSwitchComponent, FormsModule, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxColumnComponent, IgxColumnGroupComponent]
})
export class TreeGridMultiColumnHeadersExportComponent {
public data = generateEmployeeDetailedFlatData();
public selectionMode: GridSelectionMode = 'none' ;
public exportHeaders = true ;
public exportStarted (args: IgxExporterEvent ) {
args.options.ignoreMultiColumnHeaders = !this .exportHeaders;
}
}
ts コピー <div class ="grid__wrapper" >
<igx-tree-grid [igxPreventDocumentScroll ]="true" #treeGrid [data ]="data" primaryKey ="ID" [moving ]="true" foreignKey ="ParentID" [rowSelection ]="selectionMode" height ="740px"
[allowFiltering ]="true" width ="100%" >
<igx-grid-toolbar >
<igx-grid-toolbar-actions >
<igx-switch [(ngModel )]="exportHeaders" > Export multi-column headers</igx-switch >
<igx-grid-toolbar-pinning > </igx-grid-toolbar-pinning >
<igx-grid-toolbar-hiding > </igx-grid-toolbar-hiding >
<igx-grid-toolbar-exporter [exportCSV ]="false" [exportExcel ]="true" (exportStarted )="exportStarted($event)" >
</igx-grid-toolbar-exporter >
</igx-grid-toolbar-actions >
</igx-grid-toolbar >
<igx-column field ="ID" dataType ="number" [resizable ]="true" [filterable ]="false" > </igx-column >
<igx-column field ="Name" dataType ="string" [sortable ]="true" [resizable ]="true" width ="200px" > </igx-column >
<igx-column-group [pinned ]="false" header ="General Information" >
<igx-column field ="HireDate" dataType ="date" [sortable ]="true" [resizable ]="true" > </igx-column >
<igx-column-group header ="Personal Details" >
<igx-column field ="Title" dataType ="string" [sortable ]="true" [resizable ]="true" > </igx-column >
<igx-column field ="Age" dataType ="number" [sortable ]="true" [resizable ]="true" > </igx-column >
</igx-column-group >
</igx-column-group >
<igx-column-group header ="Address Information" >
<igx-column-group header ="Location" >
<igx-column field ="Country" dataType ="string" [sortable ]="true" [resizable ]="true" > </igx-column >
<igx-column field ="City" dataType ="string" [sortable ]="true" [resizable ]="true" > </igx-column >
<igx-column field ="Address" dataType ="string" [sortable ]="true" [resizable ]="true" > </igx-column >
</igx-column-group >
<igx-column-group header ="Contact Information" >
<igx-column field ="Phone" dataType ="string" [sortable ]="true" [resizable ]="true" > </igx-column >
<igx-column field ="Fax" dataType ="string" [sortable ]="true" [resizable ]="true" > </igx-column >
<igx-column field ="PostalCode" dataType ="string" [sortable ]="true" [resizable ]="true" > </igx-column >
</igx-column-group >
</igx-column-group >
</igx-tree-grid >
</div >
html コピー .grid__wrapper {
--ig-size: var(--ig-size-small);
margin : 15px ;
}
scss コピー
고정된 열 헤더가 있는 그리드 내보내기
기본적으로 Excel 내보내기 서비스는 스크롤 가능한(고정 해제된) 열 머리글과 함께 그리드를 내보냅니다. 사용자가 레코드를 스크롤할 때 항상 표시되도록 내보낸 Excel 파일 위에 모든 헤더를 고정하려는 시나리오가 있습니다. 이를 달성하려면 내보내기 옵션 FreezeHeaders를 true
로 설정할 수 있습니다.
public exportButtonHandler ( ) {
const exporterOptions = new IgxExcelExporterOptions('ExportedDataFile' );
exporterOptions.freezeHeaders = true ;
this .excelExportService.export(this .grid, exporterOptions);
}
typescript
내보낸 콘텐츠 사용자 정의
위의 예에서 Excel 내보내기 서비스는 사용 가능한 모든 데이터를 내보내고 있었습니다. 행이나 전체 열 내보내기를 건너뛰고 싶은 상황이 있습니다. 이를 달성하려면 각 열 및/또는 각 행에 대해 각각 실행되는 columnExporting
및/또는 rowExporting
이벤트에 연결하고 이벤트 인수 객체의 cancel
속성을 true
로 설정하여 해당 이벤트를 취소할 수 있습니다.
다음 예에서는 헤더가 "Age"이고 인덱스가 1인 경우 내보내기에서 열을 제외합니다.
this .excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs ) => {
if (args.header == 'Age' && args.columnIndex == 1 ) {
args.cancel = true ;
}
});
this .excelExportService.export(this .treeGrid, new IgxExcelExporterOptions('ExportedDataFile' ));
typescript
트리 그리드 구성 요소에서 데이터를 내보낼 때 내보내기 프로세스는 행 필터링 및 열 숨기기와 같은 계정 기능을 사용하고 트리 그리드에 표시되는 데이터만 내보냅니다. IgxExcelExporterOptions
객체에 속성을 설정하여 필터링된 행이나 숨겨진 열을 포함하도록 내보내기 서비스를 구성할 수 있습니다.
알려진 제한 사항
한정
설명
계층 수준
Excel 내보내기 서비스는 최대 8개 수준의 계층 구조를 생성할 수 있습니다.
최대 워크시트 크기
Excel에서 지원되는 최대 워크시트 크기는 1,048,576행 x 16,384열입니다.
셀 스타일링
Excel 내보내기 서비스는 셀 구성 요소에 적용된 사용자 정의 스타일 내보내기를 지원하지 않습니다. 이러한 시나리오에서는 Excel 라이브러리를 사용하는 것이 좋습니다.
API 참조
Excel 내보내기 서비스에는 아래에 나열된 몇 가지 API가 더 있습니다.
사용된 추가 구성요소:
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.