如何在Angular控制器中通过Blob从ASP.NET MVC下载Excel文件

我来帮你搞定这个Angular+ASP.NET MVC的Excel下载问题，结合Blob的实现方式，分后端修正和前端实现两部分来讲：

第一步：修正ASP.NET MVC后端代码 #

你提供的后端代码有几个小问题：重复实例化了HttpResponseMessage，而且缺少让浏览器识别为下载文件的关键响应头。我帮你调整了代码，确保返回正确的响应格式：

using System.Net.Http.Headers;

[HttpGet]
public HttpResponseMessage Download(SearchModel search)
{
    string fileName = "test.xls";
    byte[] fileBytes = GetFile(search); // 假设GetFile方法返回Excel文件的byte数组

    // 只实例化一次HttpResponseMessage
    HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
    response.Content = new ByteArrayContent(fileBytes);

    // 设置Excel文件对应的MIME类型：xls用application/vnd.ms-excel，xlsx用application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
    response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/vnd.ms-excel");

    // 设置Content-Disposition头，告诉浏览器以附件形式下载，并指定文件名
    response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
    {
        FileName = fileName
    };

    // 额外添加x-filename头，方便前端直接获取文件名（避免解析Content-Disposition的编码问题）
    response.Content.Headers.Add("x-filename", fileName);

    return response;
}

第二步：Angular前端实现 #

下面分两种常见的Angular版本给出实现代码：

情况1：AngularJS（1.x）控制器实现 #

在控制器中注入$http，发送请求时指定responseType: 'arraybuffer'来获取二进制数据，再通过Blob生成下载链接：

angular.module('yourApp').controller('ExcelDownloadCtrl', ['$http', function($http) {
    this.downloadExcel = function() {
        // 构造你的搜索参数
        const searchParams = {
            // 这里填你的SearchModel参数，比如keyword: 'test', startDate: '2024-01-01'
        };

        $http({
            method: 'GET',
            url: '/YourControllerName/Download', // 替换成你的控制器路由
            params: searchParams,
            responseType: 'arraybuffer' // 必须设置，否则会把二进制数据当成字符串处理
        }).then(function(response) {
            // 从响应头获取文件名，优先用x-filename
            const fileName = response.headers('x-filename') || 'default.xls';

            // 创建Blob对象，指定对应的MIME类型
            const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' });

            // 创建临时下载链接并触发下载
            const downloadLink = document.createElement('a');
            const blobUrl = URL.createObjectURL(blob);
            downloadLink.href = blobUrl;
            downloadLink.download = fileName;
            document.body.appendChild(downloadLink);
            downloadLink.click();

            // 清理资源，避免内存泄漏
            document.body.removeChild(downloadLink);
            URL.revokeObjectURL(blobUrl);
        }, function(error) {
            console.error('Excel下载失败:', error);
            // 这里可以添加用户友好的错误提示，比如alert('下载失败，请稍后重试')
        });
    };
}]);

情况2：Angular 2+（组件/控制器）实现 #

使用HttpClient发送请求，直接指定responseType: 'blob'简化处理：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'app-excel-download',
    template: '<button (click)="downloadExcel()">下载Excel</button>'
})
export class ExcelDownloadComponent {
    constructor(private http: HttpClient) {}

    downloadExcel() {
        const searchParams = {
            // 你的搜索参数
        };

        this.http.get('/YourControllerName/Download', {
            params: searchParams,
            responseType: 'blob', // 直接返回Blob类型
            observe: 'response' // 允许获取响应头
        }).subscribe({
            next: (response) => {
                // 从响应头提取文件名
                const fileName = this.extractFileNameFromHeaders(response.headers);
                // 触发下载
                this.triggerBlobDownload(response.body as Blob, fileName);
            },
            error: (err) => {
                console.error('下载出错:', err);
            }
        });
    }

    // 从响应头提取文件名的辅助方法
    private extractFileNameFromHeaders(headers: any): string {
        // 优先获取x-filename头
        const xFilename = headers.get('x-filename');
        if (xFilename) return xFilename;

        // 备用方案：解析Content-Disposition头
        const contentDisposition = headers.get('Content-Disposition');
        if (contentDisposition) {
            const matches = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
            return matches ? decodeURIComponent(matches[1].replace(/['"]/g, '')) : 'default.xls';
        }
        return 'default.xls';
    }

    // 通用的Blob下载触发方法
    private triggerBlobDownload(blob: Blob, fileName: string): void {
        const blobUrl = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = blobUrl;
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        // 清理资源
        window.URL.revokeObjectURL(blobUrl);
        document.body.removeChild(a);
    }
}

关键注意事项 #

• MIME类型匹配：xls文件用application/vnd.ms-excel，xlsx文件一定要用application/vnd.openxmlformats-officedocument.spreadsheetml.sheet，否则浏览器可能无法正确识别文件类型。
• 跨域配置：如果前端和后端不在同一域名下，后端需要配置CORS，并暴露x-filename或Content-Disposition头（ASP.NET MVC中可以通过config.EnableCors(new EnableCorsAttribute("*", "*", "*") { ExposedHeaders = "x-filename" });设置）。
• 资源清理：下载完成后一定要调用URL.revokeObjectURL释放Blob URL，并移除创建的<a>标签，避免内存泄漏。

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