엑셀 내보내기
Ignite UI for Angular Excel Exporter 서비스는 원시 데이터(배열) 또는 IgxGrid, IgxTreeGrid, IgxHierarchicalGrid 컴포넌트에서 Microsoft® Excel® 형식으로 데이터를 내보낼 수 있습니다. 내보내기 기능은 클래스에IgxExcelExporterService 캡슐화되어 있고, 데이터는 MS Excel 테이블 형식으로 내보냅니다. 이 포맷은 필터링, 정렬 등과 같은 기능을 제공합니다.
Angular Excel Exporter Example
Usage
IgniteUI Excel 익스포터를 사용하려면 먼저 app.module.ts 파일 내 데이터를IgxExcelExporterService 가져오고 서비스를 배열에providers 추가하세요:
// app.module.ts
...
import { IgxExcelExporterService } from 'igniteui-angular/grids/core';
// import { IgxExcelExporterService } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
providers: [ IgxExcelExporterService ]
})
export class AppModule {}
Note
v12.2.1 이상에서는 내보내기 서비스가 루트에서 제공됩니다. 즉, 더 이상 AppModule 공급자에서 이를 선언할 필요가 없습니다.
내보내기 프로세스를 시작하려면 구성 요소 템플릿의 버튼 핸들러를 사용할 수 있습니다.
<button (click)="exportButtonHandler()">Export Data to Excel</button>
컴포넌트의 구성자에서 타입IgxExcelExporterService 인수를 정의하여 익스포터 서비스에 접근할 수 있으며, Angular 프레임워크가 서비스의 인스턴스를 제공합니다. MS Excel 형식으로 일부 데이터를 내보내려면 내보내기 서비스의exportData 메서드를 호출해야 합니다. 이 메서드는 첫 번째 인자로 내보내고 싶은 데이터를 받아들이고, 두 번째 인자는 타입IgxExcelExporterOptions 형태로 내보내기 과정을 구성할 수 있게 해줍니다.
다음은 구성 요소의 TypeScript 파일에서 내보내기 프로세스를 실행하는 코드입니다.
// component.ts
...
import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular/grids/core';
// 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'));
}
모든 게 잘 진행된다면 내보내기 버튼이 보일 거예요. 버튼을 누르면 내보내기 과정이 실행되고, 브라우저는 "ExportedDataFile.xlsx"라는 파일을 다운로드하여 배열에서 MSlocalData Excel 형식으로 데이터를 저장합니다.
Customizing the Exported Content
위 예시들에서 Excel Exporter 서비스는 모든 사용 가능한 데이터를 내보내고 있었습니다. 어떤 상황에서는 행 내보내기나 열을 내보내는 것을 건너뛰고 싶을 수도 있습니다. 이를 위해 다음 물에 연결할 수 있습니다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'));
API References
Excel 내보내기 서비스에는 아래에 나열된 몇 가지 API가 더 있습니다.
그리드 Excel 내보내기:
사용된 추가 구성요소:
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub