如何通过HTML按钮或JS下载API返回的Excel文件？React下载乱码如何解决？

你遗漏的是请求配置中指定响应数据类型为二进制。你当前用的请求库（大概率是Axios）默认会将响应内容按文本格式解析，二进制的Excel文件被强制转成UTF-8字符串就会出现乱码，再转Blob自然无法正常识别。

解决步骤 #

1. 调整请求配置，添加responseType: 'blob'参数，告诉请求库直接返回二进制Blob对象，不要做文本转义
2. 修正原有代码中的错误写法，比如第一种方式里的file.name.split['.']是语法错误，直接传入完整文件名即可

正确代码示例 #

try {  
    const response = await api.get(`/portfolio/files?portfolio_id=${wallet.id}&portfolio_filename=${file.name}`, {
        headers: {
            'x-access-token': localStorage.getItem('token')
        },
        // 新增这一行核心配置
        responseType: 'blob'
    });

    // 原生实现方案
    const url = window.URL.createObjectURL(response.data);
    const link = document.createElement('a');
    link.href = url;
    link.download = file.name;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url); // 用完释放内存

    // 如果用file-saver可以直接用下面这行，不用上面的原生逻辑
    // fileSaver.saveAs(response.data, file.name);

} catch(err) {
    console.error(err);
}

补充说明 #

请求加上responseType: 'blob'之后，response.data本身就是已经处理好的Blob对象，不需要再手动new Blob二次包装，也不用手动指定MIME类型，返回的Blob已经自带接口返回的正确类型。

内容的提问来源于stack exchange，提问作者João Bonsegno