如何使用带有 Angular 6(内存不足错误)的大数据(50,000 行)的 ag-grid 导出到 excel 功能?
How to use ag-grid Export to excel functionality with large data(50,000 rows) with Angular 6 (OUT OF MEMORY error)?
我目前正在使用 angular 6 大数据 50,000 行的 ag-grid 导出到 excel 功能?
当我的数据少于 1000 条记录时,我可以轻松下载文件(<1 秒)但是当我将数据增加到 50000 行时,我的网络浏览器变得没有响应并且我得到 chrome 错误"Something went wrong" 过了一会儿。我的密码是
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) 下载尽可能多的行,然后下载第二部分、第三部分……等等
您可以通过 exportDataAsExcel(params) 执行此操作,其中 params 是 implements BaseExportParams
其中有几个字段,例如您可以使用 onlySelected。
2) 更方便的方法是在不使用 ag-grid api.
的情况下创建后端服务
AG-Grid 中的数据存储在内存中,如果大小超过 chrome 将抛出内存不足错误。
我遇到了类似的问题,同时通过 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);};
我目前正在使用 angular 6 大数据 50,000 行的 ag-grid 导出到 excel 功能?
当我的数据少于 1000 条记录时,我可以轻松下载文件(<1 秒)但是当我将数据增加到 50000 行时,我的网络浏览器变得没有响应并且我得到 chrome 错误"Something went wrong" 过了一会儿。我的密码是
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) 下载尽可能多的行,然后下载第二部分、第三部分……等等 您可以通过 exportDataAsExcel(params) 执行此操作,其中 params 是 implements BaseExportParams 其中有几个字段,例如您可以使用 onlySelected。 2) 更方便的方法是在不使用 ag-grid api.
的情况下创建后端服务AG-Grid 中的数据存储在内存中,如果大小超过 chrome 将抛出内存不足错误。 我遇到了类似的问题,同时通过 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);};