We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Error in Excel Export

Hi,

I was trying to test Excel export in grid component, my project it's made in Angular 7.

I`ve used the following link:
https://ej2.syncfusion.com/angular/documentation/grid/excel-exporting/?no-cache=1#limitations

When I click on export button, I received the following error en console:


core.js:15724 ERROR Error: Uncaught (in promise): TypeError: this.sharedString[i].startsWith is not a function
TypeError: this.sharedString[i].startsWith is not a function
    at Workbook.push../node_modules/@syncfusion/ej2-excel-export/src/workbook.js.Workbook.saveSharedString (workbook.js:1238)
    at Workbook.push../node_modules/@syncfusion/ej2-excel-export/src/workbook.js.Workbook.saveInternal (workbook.js:1048)
    at Workbook.push../node_modules/@syncfusion/ej2-excel-export/src/workbook.js.Workbook.save (workbook.js:1033)
    at excel-export.js:263
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:17299)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:500)
    at ZoneTask.invoke (zone.js:485)


What I missing or doing wrong?

5 Replies

PS Pavithra Subramaniyam Syncfusion Team September 5, 2019 03:36 AM

Hi Drio, 
 
Greetings from Syncfusion. 
 
Query: Error in Excel Export 
 
We have validated your query and try to reproduce the reported problem by creating sample based on your requirement. It works(Excel exporting) fine at our end. Please find the below sample for your reference. 
 
 
If you are still facing the same problem, could you please share the below information. It will be helpful to provide a better solution. 
 
  • Share full grid code snippets.
  • Share your data model(dataSource) details.
  • Share the Syncfusion version details.

Regards, 
Pavithra S. 



GU gugal August 4, 2022 11:08 PM

Hi,
can We change the name of "Excel Export" to "xlsx Download" and default icon to custom xls icon ?

icon.jpg



RR Rajapandi Ravi Syncfusion Team August 5, 2022 06:59 AM

Hi Pawan,


Thanks for your update


You can achieve this requirement of customizing the Excel Export content by modifying the corresponding locale value in the Grid’s load event as demonstrated in the below code snippet and sample,


// Grid's load event handler

onLoad() {

   (this.grid.localeObj as any).localeStrings.Excelexport = 'xlsx Download';

}


Sample: https://stackblitz.com/edit/angular-tce5w1?file=app.component.html,app.component.ts


API: https://ej2.syncfusion.com/angular/documentation/api/grid/#load


Regards,

Rajapandi R



GU gugal replied to Rajapandi Ravi August 8, 2022 01:55 AM

Hi Rajapandi R,
Thank you for the reply, But what about Default Icon. I want my custom Icon in the place of default Icon. can you please help me in this also.

icon.jpg

Thanks.

Regards,
Pawan



RR Rajapandi Ravi Syncfusion Team August 9, 2022 08:43 AM

Hi Pawan,


Thanks for the update


You can achieve your requirement by using the Custom toolbar items and also like to display the custom Toolbar icon. Actions for this customized toolbar items are defined in the toolbarClick event, and you can display the icon by defining the respective CSS content. Please refer the below code example, sample and documentation for more information.


App.component.ts

 

public ngOnInit(): void {

        this.data = employeeDetails;

        this.toolbar = [{ text: 'Xlsx Download', tooltipText: 'xlsx Download', prefixIcon: 'e-custom', id: 'expandall' }];

        this.pageSettings = { pageCount: 5 };

    }

    toolbarClick(args: ClickEventArgs): void {

        switch (args.item.text) {

            case 'Xlsx Download':

                this.grid.excelExport();

                break;

        }

    }


Index.html

 

<Style>

   .e-custom:before {

      content: "\e726";  

    }

  </style>

 


Sample: https://stackblitz.com/edit/angular-tce5w1-adhg11?file=index.html,app.component.ts,app.component.html


You can use custom icons as you want by defining the respective CSS content. Please refer the below documentation for more information.


Icons: https://ej2.syncfusion.com/documentation/appearance/icons/#material


Documentation: https://ej2.syncfusion.com/angular/documentation/grid/tool-bar/tool-bar-items/#custom-toolbar-items


Regards,

Rajapandi R


Loader.
Live Chat Icon For mobile
Up arrow icon