Excel 서비스로 Angular 그리드 내보내기

    The Excel Exporter service can export data to excel from the IgxGrid. The data export functionality is encapsulated in the IgxExcelExporterService class and the data is exported in MS Excel table format. This format allows features like filtering, sorting, etc. To do this you need to invoke the IgxExcelExporterService's export method and pass the IgxGrid component as first argument to export grid easily.

    Angular Excel Exporter Example

    Exporting Grid's Data

    To start using the IgniteUI Excel Exporter first import the IgxExcelExporterService in the app.module.ts file and add the service to the providers array:

    // 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 공급자에서 이를 선언할 필요가 없습니다.

    내보내기 프로세스를 시작하려면 구성 요소 템플릿의 버튼 핸들러를 사용할 수 있습니다.

    <igx-grid #grid [data]="localData" [autoGenerate]="true"></igx-grid>
<button (click)="exportButtonHandler()">Export IgxGrid to Excel</button>

    You may access the exporter service by defining an argument of type IgxExcelExporterService in the component's constructor and the Angular framework will provide an instance of the service. To export some data in MS Excel format you need to invoke the exporter service's export method and pass the IgxGrid component as first argument.

    다음은 구성 요소의 TypeScript 파일에서 내보내기 프로세스를 실행하는 코드입니다.

    // component.ts
import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular';
import { IgxGridComponent } from 'igniteui-angular';

@ViewChild('grid') public grid: IgxGridComponent;

constructor(private excelExportService: IgxExcelExporterService) {
}

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

    모든 것이 순조롭게 진행되면 IgxGrid 구성 요소와 그 아래에 버튼이 표시됩니다. 버튼을 누르면 내보내기 프로세스가 시작되고 브라우저는 MS Excel 형식의 그리드 구성 요소 데이터가 포함된 "ExportedDataFile.xlsx"라는 파일을 다운로드합니다.

    Export All Data

    ​페이징과 같은 원격 작업을 사용 중이고 그리드가 모든 데이터에 액세스할 수 없는 경우가 있습니다. 이러한 경우에는 Excel 내보내기 서비스를 사용하고 가능한 경우 전체 데이터 수집을 전달하는 것이 좋습니다. 예:

    public exportButtonHandler() {
  this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions('ExportedDataFile'));
}

    Export Grouped Data

    그룹화된 데이터를 내보내려면 하나 이상의 열을 기준으로 그리드를 그룹화하면 됩니다. 브라우저는 선택한 열별로 그룹화된 MS Excel 형식의 그리드 구성 요소 데이터를 포함하는 "ExportedDataFile.xlsx"라는 파일을 다운로드합니다. 예:

    Export Multi Column Headers Grid

    It is now possible to export Grid with defined multi-column headers. All headers will be reflected in the exported excel file as they are displayed in the Grid. If you want to exclude the defined multi-column headers from the exported data you can set the exporter option ignoreMultiColumnHeaders to true.

    Note

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

    Export Grid with Frozen Column Headers

    By default Excel Exporter service exports the grid with scrollable (unfrozen) column headers. There are scenarios in which you may want to freeze all headers on top of the exported excel file so they always stay in view as the user scrolls through the records. To achieve this you could set the exporter option freezeHeaders to true.

    public exportButtonHandler() {
    const exporterOptions = new IgxExcelExporterOptions('ExportedDataFile');
    exporterOptions.freezeHeaders = true;
    this.excelExportService.export(this.grid, exporterOptions);
}

    Customizing the Exported Content

    In the above examples the Excel Exporter service was exporting all available data. There are situations in which you may want to skip exporting a row or even an entire column. To achieve this you may hook to the columnExporting and/or rowExporting events which are fired respectively for each column and/or each row and cancel the respective event by setting the event argument object's cancel property to 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.grid, new IgxExcelExporterOptions('ExportedDataFile'));

    When you are exporting data from the Grid component, the export process takes in account features like row filtering and column hiding and exports only the data visible in the Grid. You can configure the exporter service to include filtered rows or hidden columns by setting properties on the IgxExcelExporterOptions object.

    Known Limitations

    한정 설명
    최대 워크시트 크기 Excel에서 지원되는 최대 워크시트 크기는 1,048,576행 x 16,384열입니다.
    셀 스타일링 Excel 내보내기 서비스는 셀 구성 요소에 적용된 사용자 정의 스타일 내보내기를 지원하지 않습니다. 이러한 시나리오에서는 Excel 라이브러리를 사용하는 것이 좋습니다.

    API References

    Excel 내보내기 서비스에는 아래에 나열된 몇 가지 API가 더 있습니다.

    사용된 추가 구성요소:

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.