React前端下载文件编码异常无法读取的问题求解

问题根源在于axios的默认响应解析行为：axios会自动将响应数据当作UTF-8文本处理，图片这类二进制文件的字节流被错误转成文本后，就会出现大量问号，导致文件损坏。Postman能自动识别二进制响应并正确处理，所以可以正常下载。

不需要转UTF-8编码，正确做法是让axios直接返回二进制Blob数据，修改后的代码如下：

const onDownload = () => {
    axios({
        method: "GET",
        url: `http://localhost:8080/files/download/${id}`,
        validateStatus: () => true,
        headers: {
            'Authorization': "Bearer " + localStorage.getItem("token")
        },
        // 关键配置：指定响应类型为blob，让axios直接返回二进制数据
        responseType: 'blob'
    }).then(resp => {
        const url = window.URL.createObjectURL(resp.data); // resp.data已经是Blob，无需再包裹
        const link = document.createElement('a');
        link.href = url;
        link.download = file.filename;

        document.body.appendChild(link);
        link.click();
        link.parentNode.removeChild(link);
        // 释放URL对象，避免浏览器内存泄漏
        window.URL.revokeObjectURL(url);
    });
};

补充说明：

• responseType: 'blob'是核心，它告诉axios不要解析响应内容，直接以Blob对象返回原始二进制数据。
• 新增window.URL.revokeObjectURL(url)是为了在下载完成后释放创建的URL对象，避免内存泄漏。
• 确保后端返回的响应头中Content-Type设置正确（比如图片对应image/jpeg、image/png），这能让浏览器更好地识别文件类型，但即使后端没设置，前端指定responseType也能解决核心的乱码问题。

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