Angular Pivot Grid Export to Excel Service

    The Excel Exporter service can export data to excel from the IgxPivotGrid. The data export functionality is encapsulated in the IgxExcelExporterService class. To trigger the process, you need to invoke the IgxExcelExporterService's export method and pass the IgxPivotGrid component as the first argument.

    Angular Excel Exporter Example

    Exporting Pivot 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

    In v12.2.1 and later, the exporter services are provided in root, which means you no longer need to declare them in the AppModule providers.

    To initiate an export process you may use the handler of a button in your component's template.

    <igx-pivot-grid #pivotGrid [data]="localData" [autoGenerate]="true"></igx-pivot-grid>
<button (click)="exportButtonHandler()">Export IgxPivotGrid 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 IgxPivotGrid component as first argument.

    Here is the code which will execute the export process in the component's typescript file:

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

@ViewChild('pivotGrid') public pivotGrid: IgxPivotGridComponent;

constructor(private excelExportService: IgxExcelExporterService) {
}

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

    If all went well, you should see the IgxPivotGrid component and a button under it. When pressing the button, it will trigger the export process and the browser will download a file named "ExportedDataFile.xlsx" which contains the data from the Pivot Grid component in MS Excel format.

    Note

    Expand/collapse indicators in Excel are shown based on the hierarchy of the last dimension of the Pivot Grid.

    Note

    The exported Pivot Grid will not be formatted as a table, since Excel tables do not support multiple row headers.

    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.

    The following example will exclude all columns from the export if their header is "Amount of Sale":

    // component.ts

this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
    if (args.header == 'Amount of Sale') {
        args.cancel = true;
    }
});
this.excelExportService.export(this.pivotGrid, new IgxExcelExporterOptions('ExportedDataFile'));

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

    Known Limitations

    Limitation Description
    Max worksheet size The maximum worksheet size supported by Excel is 1,048,576 rows by 16,384 columns.
    Cell Styling The excel exporter service does not support exporting a custom style applied to a cell component. In such scenarios we recommend using the Excel Library.

    API References

    The Excel Exporter service has a few more APIs to explore, which are listed below.

    Additional components that were used:

    Additional Resources

    Our community is active and always welcoming to new ideas.