如何使用ag-grid导出到具有Angular 6(OUT OF MEMORY错误)的大数据(50,000行)的excel功能?

问题描述 投票:1回答:2

我目前正在使用带有角度6和大数据50,000行的ag-grid中的excel功能进行导出?

当我有1000条记录的数据时,我可以轻松下载文件(<1秒),但随着我将数据增加到50000行,我的网页浏览器变得没有响应,我得到了铬错误“出了问题”而。我的代码是


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);
}

使用大约1000行的网格数据,这是完全正常的,我能够在大约1秒内在我的浏览器中下载文件,但随着我将数据增加到50000行,我的浏览器变得没有响应。

angular angular6 ag-grid ag-grid-angular
2个回答
1
投票

AG-Grid中的数据存储在内存中,如果大小超过chrome将导致Out Of Memory错误。我有一个类似的问题,通过Ag-Grid导出50,000多个数据会导致少数用户崩溃浏览器。以下是可以考虑的一些事情

  1. 而不是使用网格API方法创建服务器端方法来导出大数据
  2. CSV导出比Excel导出快,但您不会获得格式化
  3. 尝试下面我正在使用的代码,但它不是100%完整的证明,但有助于通知用户在后台发生的一些行动 $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);};

0
投票

你有几个选择来解决这个问题:1)下载尽可能多的行然后下载第二部分,第三部分...依此类推你可以通过exportDataAsExcel(params)来实现这一点,其中params实现了BaseExportParams,它有几个字段,例如你只能使用选择。 2)更方便的方法是在不使用ag-grid api的情况下创建后端服务。

© www.soinside.com 2019 - 2024. All rights reserved.