如何通过AngularJS调用ASP.NET MVC控制器实现Excel导出？

第一步：完善ASP.NET MVC后端控制器代码 #

你给的控制器代码有点不完整，先把它补全，确保能正确生成并返回Excel文件流：

public ActionResult ExportExcelBankData(BankDataViewModel viewModel) 
{ 
    List<BankDataViewModel> bankDatas = (List<BankDataViewModel>)Session["bankDatas"]; 
    bankDatas = bankDatas.OrderBy(x => x.completeLoading).ToList(); 

    using (var package = new ExcelPackage()) 
    {
        // 创建工作表
        var worksheet = package.Workbook.Worksheets.Add("银行数据");
        
        // 写入表头（根据你的ViewModel实际字段调整）
        worksheet.Cells[1, 1].Value = "业务编号";
        worksheet.Cells[1, 2].Value = "完成加载状态";
        // 可添加更多表头字段...

        // 写入数据行
        int row = 2;
        foreach (var item in bankDatas)
        {
            worksheet.Cells[row, 1].Value = item.BusinessId; // 替换为ViewModel实际字段
            worksheet.Cells[row, 2].Value = item.completeLoading;
            // 可添加更多字段赋值...
            row++;
        }

        // 自动调整列宽，优化显示
        worksheet.Cells.AutoFitColumns();

        // 准备返回的文件流
        var stream = new MemoryStream();
        package.SaveAs(stream);
        stream.Position = 0;

        string fileName = "bankData.xlsx";
        string contentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
        
        // 返回文件流，触发浏览器下载
        return File(stream, contentType, fileName);
    }
}

第二步：AngularJS前端实现方案 #

AngularJS默认的$http处理JSON格式，要下载二进制Excel文件，需要指定响应类型为blob，下面是具体实现步骤：

1. 封装下载服务（推荐，便于复用）

angular.module('yourAppModule')
.service('ExcelDownloadService', ['$http', function($http) {
    this.downloadBankData = function(viewModelParams) {
        return $http({
            method: 'GET', // 若参数复杂可改用POST，记得同步修改后端特性
            url: '/YourController/ExportExcelBankData', // 替换为你的控制器路由
            params: viewModelParams, // 传递与后端匹配的ViewModel参数
            responseType: 'blob' // 关键：指定响应为二进制Blob类型
        });
    };
}]);

2. 在页面控制器中调用服务并触发下载

angular.module('yourAppModule')
.controller('YourPageController', ['$scope', 'ExcelDownloadService', function($scope, ExcelDownloadService) {
    $scope.triggerExport = function() {
        // 准备要传递给后端的ViewModel参数（按需填充）
        var exportParams = {
            // 示例参数：
            // startDate: $scope.selectedStartDate,
            // keyword: $scope.searchKeyword
        };

        ExcelDownloadService.downloadBankData(exportParams)
        .then(function(response) {
            // 创建临时下载链接并触发点击
            var blob = new Blob([response.data], { type: response.headers('Content-Type') });
            var downloadUrl = window.URL.createObjectURL(blob);
            var link = document.createElement('a');
            
            link.href = downloadUrl;
            link.download = 'bankData.xlsx'; // 文件名需与后端保持一致
            document.body.appendChild(link);
            link.click();
            
            // 清理临时资源
            window.URL.revokeObjectURL(downloadUrl);
            document.body.removeChild(link);
        })
        .catch(function(error) {
            console.error('导出失败:', error);
            alert('Excel导出失败，请检查数据后重试');
        });
    };
}]);

3. 页面添加导出按钮

<button ng-click="triggerExport()" class="btn btn-success">导出银行数据到Excel</button>

关键注意事项 #

• 确保后端Session["bankDatas"]已正确存储待导出的数据，避免出现空Excel的情况。
• 若ViewModel参数较多或包含复杂数据，建议改用POST请求：后端添加[HttpPost]特性，前端将$http的method改为POST，参数放在data属性中。
• 确认项目已安装EPPlus包（即ExcelPackage所在的依赖包），若未安装可通过NuGet搜索安装。

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