ASP.NET Core MVC控制器返回文件但无法触发浏览器下载求助

问题根源 #

用$.ajax发起GET请求时，浏览器会在JS上下文内接收响应内容，不会自动触发默认的文件下载流程——哪怕响应头包含正确的Content-Disposition，也只会把内容交给JS处理，而非触发下载弹窗。

解决方案 #

方案1：直接用window.open发起请求（最简单） #

修改ViewModel中的downloadAnswers方法，替换Ajax调用为窗口打开请求：

downloadAnswers(batchId: number) {
    window.open(`/Attestering/AdminTools/${batchId}/DownloadAnswers/`, '_blank');
}

浏览器会新开一个临时窗口处理请求，识别到文件响应后自动触发下载，完成后窗口会自动关闭（部分浏览器可能需要手动关闭空白窗口）。

方案2：创建隐藏<a>标签模拟点击（无弹窗） #

如果不想新开窗口，可以动态创建下载链接并触发点击：

downloadAnswers(batchId: number) {
    const downloadLink = document.createElement('a');
    downloadLink.href = `/Attestering/AdminTools/${batchId}/DownloadAnswers/`;
    // 可手动指定文件名，也可留空让服务器返回的Content-Disposition头决定
    downloadLink.download = 'answers.csv';
    downloadLink.style.display = 'none';
    
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}

方案3：Ajax配合Blob处理（需带自定义请求头时用） #

如果必须用Ajax（比如需要携带认证token等自定义请求头），需将响应转为Blob后手动触发下载：

downloadAnswers(batchId: number) {
    $.ajax({
        url: `/Attestering/AdminTools/${batchId}/DownloadAnswers/`,
        type: 'GET',
        xhrFields: {
            responseType: 'blob' // 指定响应类型为Blob
        },
        success: function(blob) {
            const downloadLink = document.createElement('a');
            const blobUrl = window.URL.createObjectURL(blob);
            
            // 从响应头解析服务器指定的文件名
            const contentDisposition = this.getResponseHeader('Content-Disposition');
            let fileName = 'answers.csv';
            if (contentDisposition) {
                const fileNameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
                if (fileNameMatch?.[1]) {
                    fileName = fileNameMatch[1].replace(/['"]/g, '');
                }
            }
            
            downloadLink.href = blobUrl;
            downloadLink.download = fileName;
            downloadLink.style.display = 'none';
            
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
            window.URL.revokeObjectURL(blobUrl); // 释放Blob URL资源
        }
    });
}

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