How to use ag-grid Export to excel functionality with large data(50,000 rows) with Angular 6 (OUT OF MEMORY error)?

Question

I am currently working with export to excel functionality in ag-grid with angular 6 with large data 50,000 rows?

When I have less data 1000 records, I am able to download the file easily (<1 second) but as I have increased the data to 50000 rows , My web browser becomes unresponsive and I get the chrome error "Something went wrong" after a while. My code is

---

onBtExport() {
var params = {
    suppressTextAsCDATA: true,
    allColumns:true,
    onlySelected: false,
    fileName:this.elementRef.nativeElement.querySelector('#fileName').value,
    sheetName: 
    this.elementRef.nativeElement.querySelector('#sheetName').value
};
//this.gridApi.exportDataAsExcel(params);
var content = this.gridApi.getDataAsExcel(params);
var workbook = XLSX.read(content, {type: 'binary'});
var xlsxContent = XLSX.write(workbook, {bookType: 'xlsx', type: 'base64'});
download(params, xlsxContent);
}

With grid data about 1000 rows , This is working absolutely fine ,I am able to download the file in my browser in about 1 second , but as I increase by data to 50000 rows , My browser becomes unresponsive.

Answer 1

Data in AG-Grid is stored in memory if the size exceeds chrome will throw Out Of Memory error. I had a similar issue while exporting 50,000 plus data thru Ag-Grid would crash browser for few users. Below are few things which can be considered

1. Rather than using a grid API method create a server side method to export large data
2. CSV export is faster than Excel Export, but you will not get formatting

3. Try below code which i am using but its not 100% full proof but helps notifying user that some action happening in background

    $scope.onBtExportXls = function () {$scope.agGridOptions.api.showLoadingOverlay();
   
   setTimeout(function () {
   
   content = this.gridOptions.api.getDataAsExcel(xlsExcelParams);
   
   var blobObject = new Blob(["\ufeff", content], {
           type: "text/csv;charset=utf-8;"
       });
   
   if (window.navigator.msSaveOrOpenBlob) {
       window.navigator.msSaveOrOpenBlob(blobObject, fileName);
   }
   else {
       // Chrome
       var downloadLink = document.createElement("a");
       downloadLink.href = window.URL.createObjectURL(blobObject);
       downloadLink.download = fileName;
       document.body.appendChild(downloadLink);
       downloadLink.click();
       document.body.removeChild(downloadLink);
   }      
   $scope.agGridOptions.api.hideOverlay();
   }, 50);};