2

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

当我有较少的数据 1000 条记录时，我可以轻松下载文件（<1 秒），但是当我将数据增加到 50000 行时，我的 Web 浏览器变得无响应，并且我收到 chrome 错误“出现问题”后尽管。我的代码是

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

4

2 回答 2

2

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);};
于 2019-02-20T12:16:02.927 回答
0

你有几个选择来解决这个问题：1）下载尽可能多的行然后下载第二部分，第三部分......等等你可以通过exportDataAsExcel（params）来做到这一点，其中params实现了BaseExportParams，它有几个字段例如你可以使用onlySelected。2）更方便的方法是创建后端服务而不使用 ag-grid api。

于 2019-02-20T08:08:21.283 回答