AngularJS导出大量Excel数据时出现栈溢出错误求解决方案

问题根源 #

1. 原代码依赖table2excel库，该工具需要先创建包含50万行的DOM表格，超大DOM节点会占用大量内存，且库内部的DOM处理逻辑可能触发递归调用，直接导致栈溢出。
2. export函数存在完全冗余的if-else分支，重复执行相同逻辑，无实际意义。

修改方案 #

1. 简化冗余代码 #

先合并export函数里的重复逻辑：

$scope.export = function () {
    $scope.temp = $scope.list;
    if ($scope.temp.length > 0) {
        exportToExcel($scope.temp, $window.location.hash.substring(3));
    }
}

2. 替换DOM依赖的导出方式，改用SheetJS（XLSX） #

放弃依赖DOM的table2excel，使用SheetJS直接处理数据数组（不涉及DOM操作），从根源避免栈溢出和内存过载：

实现新的导出函数

function exportToExcel(data, filename) {
    // 提取表头，过滤Angular自动生成的$$hashKey字段
    const headers = Object.keys(data[0]).filter(key => key !== "$$hashKey");
    
    // 将JSON数据转换为SheetJS兼容的二维数组格式
    const worksheetData = [
        headers, // 表头行
        ...data.map(item => headers.map(key => item[key])) // 逐行转换数据
    ];
    
    // 创建工作表与工作簿
    const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
    
    // 导出为Excel文件
    XLSX.writeFile(workbook, `${filename}.xlsx`);
}

3. 清理无用代码 #

原GenerateHTMLTable函数不再需要，直接删除即可。

额外优化提示 #

• 若50万条数据仍有性能压力，可使用Web Worker在后台线程处理数据转换，避免阻塞主线程导致页面卡顿。
• 可添加导出加载提示，提升用户等待时的体验。

内容的提问来源于stack exchange，提问作者faraz