AngularJS下载Api返回的xlsx文件时出现格式无效错误求助

前端（AngularJS）代码修正 #

原代码未正确处理二进制响应，且MIME类型配置错误，导致生成的文件格式无效。修改如下：

public downloadFile(url: string): ng.IPromise<any> {
    return fetch(url)
        .then(response => response.blob()) // 将响应转为Blob二进制对象
        .then(blobData => {
            let filename: string = this.getFileName(response);
            let downloadLink = document.createElement('a');
            // 使用xlsx标准MIME类型
            downloadLink.href = window.URL.createObjectURL(
                new Blob([blobData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
            );
            downloadLink.setAttribute('download', filename);
            document.body.appendChild(downloadLink);
            downloadLink.click();
            // 清理资源避免内存泄漏
            window.URL.revokeObjectURL(downloadLink.href);
            document.body.removeChild(downloadLink);
        });            
}

核心修改点：

• 通过response.blob()获取正确的二进制文件数据，而非直接使用response对象
• Blob类型替换为xlsx标准MIME类型application/vnd.openxmlformats-officedocument.spreadsheetml.sheet（旧类型application/vnd.ms-excel对应xls格式，不适用于xlsx）
• 添加资源清理步骤，避免浏览器内存泄漏

后端（C#）代码修正 #

确保返回的响应头和文件二进制数据正确：

HttpResponseMessage response = new HttpResponseMessage(System.Net.HttpStatusCode.OK);
response.Content = new ByteArrayContent(byteArray);
response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
response.Content.Headers.ContentDisposition.FileName = FileName;
// 强制设置xlsx正确的MIME类型
response.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
response.Content.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");
return response;

核心检查点：

• 确认byteArray是合法的xlsx文件二进制数据（需通过EPPlus、NPOI等库正确生成）
• 确保FileName后缀为.xlsx，避免扩展名不匹配
• 替换旧的MIME类型，与前端保持一致

额外验证步骤 #

1. 直接访问API地址，下载文件后尝试打开，排查是否为后端生成的文件本身损坏
2. 检查getFileName方法是否正确解析响应头中的文件名，避免文件名或后缀错误

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