React从.NET Core API下载Excel失败：createObjectURL重载解析错误

前端代码修复（核心问题） #

你的前端请求存在两个关键错误，导致参数无法传递且响应未被识别为Blob：

1. responseType配置位置错误：axios的responseType是独立的配置项，不应放在headers中
2. 参数传递格式错误：将params包裹在额外对象中，导致后端无法正确绑定查询参数

修正后的前端代码：

const Excel = {
    export: (params: URLSearchParams) => {
        axios.get(`/excel/export`, {
            params: params, // 直接传递参数，无需额外包装
            responseType: 'blob' // 正确配置响应类型
        }).then((response) => {      
            const link = document.createElement('a');
            const url = URL.createObjectURL(response.data);
            link.href = url;
            link.download = `export_${new Date().toISOString().slice(0,10)}.xlsx`;
            link.click();
            // 清理对象URL，避免内存泄漏
            URL.revokeObjectURL(url);
        }).catch(error => {
            console.error('导出失败:', error);
        });
    }
}

后端代码验证（可选优化） #

你的后端代码逻辑整体正确，可做小优化确保资源处理更规范，同时确认result已正确获取过滤后的数据：

[HttpGet("export")]
public IActionResult Export([FromQuery] SalespriceParams param, CancellationToken cancellationToken)
{
    // 确保此处已根据param过滤得到正确的result数据集
    var result = GetFilteredSalesPrices(param, cancellationToken);

    using var stream = new MemoryStream();  
    using (var package = new ExcelPackage(stream))
    {
        var workSheet = package.Workbook.Worksheets.Add("export");
        workSheet.Cells.LoadFromCollection(result, true);
        package.Save();
    }
    stream.Position = 0;                  

    return File(stream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "export.xlsx");
}

POST请求方案（参数过多时可选） #

如果参数数量超出GET请求长度限制，可切换为POST方式：

后端修改 #

[HttpPost("export")]
public IActionResult Export([FromBody] SalespriceParams param, CancellationToken cancellationToken)
{
    // 复用原有的Excel生成逻辑
}

前端POST请求代码 #

const Excel = {
    export: (params: SalespriceParams) => {
        axios.post(`/excel/export`, params, {
            responseType: 'blob'
        }).then((response) => {      
            const link = document.createElement('a');
            const url = URL.createObjectURL(response.data);
            link.href = url;
            link.download = `export_${new Date().toISOString().slice(0,10)}.xlsx`;
            link.click();
            URL.revokeObjectURL(url);
        }).catch(error => {
            console.error('导出失败:', error);
        });
    }
}

关键注意事项 #

• 确保SalespriceParams类的属性名称与前端传递的参数名称完全一致（大小写敏感，除非配置了大小写不敏感绑定）
• 可通过浏览器开发者工具查看请求的URL参数（GET）或请求体（POST）是否正确传递
• 清理ObjectURL是必要的，避免浏览器内存泄漏

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