엑셀 내보내기
Ignite UI for Angular 원시 데이터(배열) 또는 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';
// 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';
// 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'));
}
모두 잘 진행되었다면 내보내기 버튼이 보일 것입니다. 누르면 내보내기 프로세스가 시작되고 브라우저는 MS Excel 형식의 localData 배열의 데이터가 포함된 "ExportedDataFile.xlsx"라는 파일을 다운로드합니다.
Customizing the Exported Content
위의 예에서 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'));
API References
Excel 내보내기 서비스에는 아래에 나열된 몇 가지 API가 더 있습니다.
그리드 Excel 내보내기:
사용된 추가 구성요소:
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub