如何使用 ag-grid 导出到具有 Angular 6 的大数据（50,000 行）的 excel 功能（内存不足错误）？

Posted 2023-03-28

【中文标题】如何使用 ag-grid 导出到具有 Angular 6 的大数据（50,000 行）的 excel 功能（内存不足错误）？

【英文标题】：How to use ag-grid Export to excel functionality with large data(50,000 rows) with Angular 6 (OUT OF MEMORY error)?

【发布时间】：2019-07-12 14:46:55

【问题描述】：

我目前正在使用 angular 6 和 50,000 行大数据的 ag-grid 中的导出到 excel 功能？

当我有较少的数据 1000 条记录时，我可以轻松下载文件（

---

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 行时，我的浏览器变得无响应。

【参考方案1】：

您有多种选择来解决此问题： 1）下载尽可能多的行然后下载第二部分，第三部分......等等 您可以通过 exportDataAsExcel(params) 执行此操作，其中参数是实现 BaseExportParams 它有几个字段，例如您可以使用 onlySelected。 2) 更方便的方法是不使用 ag-grid api 创建后端服务。

【讨论】：

感谢您的回答，但如果我使用后端服务来创建和下载 excel 文件，那么如果我在 ag 网格上设置一些过滤器，如何实现。

【参考方案2】：

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

而不是使用网格 API 方法创建服务器端方法来导出大数据 CSV 导出比 Excel 导出快，但不会格式化

尝试以下我正在使用的代码，但它不是 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);;

【讨论】：

感谢您的回答，但 content = this.gridOptions.api.getDataAsExcel(xlsExcelParams); 行本身会导致内存不足错误。

你能告诉我，如果我们从服务器端下载 excel 文件，那么如果我们在 ag-grid 上设置一些过滤器，如何实现这一点。

是的，这可以通过使用 Grid API 方法 gridOptions.api.getFilterModel() 来实现。这将返回一个对象，其中包含应用的字段过滤器、过滤器的类型（集合、日期、数字）以及传递给过滤器的值。使用此模型并在服务器端使用 LINQ 或 SQL 进行相应的过滤。希望这会有所帮助。 Plunker Link

非常感谢，在最新的ag grid 20.1.0版本发布说明中，开发者说他们已经修复了大数据的内存不足错误，所以你尝试使用它。如果可行，我还将更新我的 ag 网格版本。

@Yatharth Mishra，确定我需要尝试升级我们仍在使用 17.0。升级后会告诉你它是否工作。感谢您标记为正确答案。