Syncfusion Essential JS2 grid reveals HTML tags with URLs in exporting to MS Excel 2016

Question

I have implemented an export-to-excel functionality with a syncfusion-ej2 Grid (https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/). There a column in the grid which contains URLs. Once the export is done, those links are shown with HTML syntaxes, on the excel sheet. I have already searched for this on the internet and couldn't find any solution. Please advise.

Answer 1

We suggest you to use the “excelQueryCellInfo” event of Grid. In the “excelQueryCellInfo” event handler function we have removed the anchor tag contained in the cell’s data, and pass only the text content to be exported to excel. Please refer the code example below,

[html]    

<ejs-grid #masterGrid [dataSource]='data' ... [allowExcelExport]='true' (excelQueryCellInfo)='excelQueryCellInfo($event)'>
    ...
</ejs-grid>

[ts]

excelQueryCellInfo(args:any):void{
  if(args.column.field == "CustomerID"){        //Check for the “CustomerID” column which has the anchor data 
    let container:any = document.createElement("div");
    container.innerHTML = args.value;
    args.value = container.textContent;          //Pass only the string content to be exported to excel
  }
}

We have also prepared a sample for your convenience. Please refer the link below, Sample : https://stackblitz.com/edit/angular-srzcxu-41noip?file=normal-edit.component.ts

Documentation : https://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#excelquerycellinfo

Madhu [Syncfusion Team]