엑셀 내보내기
Ignite UI for Angular 원시 데이터(배열) 또는 IgxGrid, IgxTreeGrid 및 IgxHierarchicalGrid 구성 요소에서 Microsoft® Excel® 형식으로 데이터를 내보낼 수 있습니다. 내보내기 기능은 IgxExcelExporterService
클래스에 캡슐화되고 데이터는 MS Excel 테이블 형식으로 내보내집니다. 이 형식은 필터링, 정렬 등의 기능을 허용합니다.
Angular Excel Exporter 예제
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
용법
IgniteUI Excel 내보내기 사용을 시작하려면 먼저 app.module.ts 파일에서 IgxExcelExporterService
가져오고 providers
배열에 서비스를 추가합니다.
// app.module.ts
...
import { IgxExcelExporterService } from 'igniteui-angular';
// import { IgxExcelExporterService } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
providers: [ IgxExcelExporterService ]
})
export class AppModule {}
typescript
v12.2.1 이상에서는 내보내기 서비스가 루트에서 제공됩니다. 즉, 더 이상 AppModule 공급자에서 이를 선언할 필요가 없습니다.
내보내기 프로세스를 시작하려면 구성 요소 템플릿의 버튼 핸들러를 사용할 수 있습니다.
<button (click)="exportButtonHandler()">Export Data to Excel</button>
html
구성 요소의 생성자에서 IgxExcelExporterService
유형의 인수를 정의하여 익스포터 서비스에 액세스할 수 있으며 Angular 프레임워크는 서비스 인스턴스를 제공합니다. MS Excel 형식으로 일부 데이터를 내보내려면 익스포터 서비스의 exportData
메서드를 호출해야 합니다. 이 메서드는 내보내려는 데이터를 첫 번째 인수로 받아들이고 두 번째 인수는 IgxExcelExporterOptions
유형이며 내보내기 프로세스를 구성할 수 있습니다.
다음은 구성 요소의 TypeScript 파일에서 내보내기 프로세스를 실행하는 코드입니다.
// component.ts
...
import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular';
// import { IgxExcelExporterService, IgxExcelExporterOptions } from '@infragistics/igniteui-angular'; for licensed package
...
public localData = [
{ Name: 'Eric Ridley', Age: '26' },
{ Name: 'Alanis Brook', Age: '22' },
{ Name: 'Jonathan Morris', Age: '23' }
];
constructor(private excelExportService: IgxExcelExporterService) {
}
public exportButtonHandler() {
this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions('ExportedDataFile'));
}
typescript
모두 잘 진행되었다면 내보내기 버튼이 보일 것입니다. 누르면 내보내기 프로세스가 시작되고 브라우저는 MS Excel 형식의 localData
배열의 데이터가 포함된 "ExportedDataFile.xlsx"라는 파일을 다운로드합니다.
내보낸 콘텐츠 사용자 정의
위의 예에서 Excel 내보내기 서비스는 사용 가능한 모든 데이터를 내보내고 있었습니다. 행이나 전체 열 내보내기를 건너뛰고 싶은 상황이 있습니다. 이를 달성하려면 각 열 및/또는 각 행에 대해 각각 실행되는 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.igxGrid1, new IgxExcelExporterOptions('ExportedDataFile'));
typescript
API 참조
Excel 내보내기 서비스에는 아래에 나열된 몇 가지 API가 더 있습니다.
그리드 Excel 내보내기:
사용된 추가 구성요소: