Spring Controller返回文件：CSV正常，图片、Zip文件损坏问题求助

你的问题核心在于控制器没有正确设置二进制文件的响应头，同时前端Ajax请求也没有以二进制格式接收数据，导致二进制字节被错误编码，最终文件损坏、体积变大（CSV是文本格式，所以不受影响）。下面是具体的修复方案：

1. 修正后端控制器代码 #

你需要在响应中添加必要的头信息，明确告诉浏览器这是二进制文件，并指定正确的文件类型和大小：

@ResponseBody 
@GetMapping(value = "/get") 
public void getFile(HttpServletResponse response, @RequestParam(value = "id") String id) throws Exception { 
    byte[] file = findFileById(id);
    // 根据文件ID获取对应的MIME类型，比如从文件元数据提取或按后缀判断
    String mimeType = getMimeTypeById(id); // 需自行实现该方法
    int fileSize = file.length;

    response.reset();
    response.setBufferSize(BUFFER_SIZE);
    // 设置对应文件的MIME类型，如image/png、application/zip、text/csv
    response.setContentType(mimeType);
    // 告知浏览器文件准确大小，避免传输异常
    response.setContentLength(fileSize);
    // 可选：设置下载触发头，指定文件名（按需开启）
    response.setHeader("Content-Disposition", "attachment; filename=\"" + getFileNameById(id) + "\"");
    // 明确以二进制传输，防止容器自动编码转换
    response.setHeader("Content-Transfer-Encoding", "binary");

    // 使用try-with-resources自动关闭输出流，避免资源泄漏
    try (OutputStream out = response.getOutputStream()) {
        out.write(file);
        out.flush();
    } catch (IOException e) {
        // 建议替换为更合理的异常处理，比如返回500错误码
        response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
        e.printStackTrace();
    }
}

关键说明： #

• setContentType：必须匹配文件真实类型，不能使用默认文本类型，否则浏览器会错误解析二进制流。
• setContentLength：让浏览器明确预期接收的字节数，避免截断或补位导致文件损坏。
• Content-Transfer-Encoding: binary：强制以二进制模式传输，杜绝编码转换对原始字节的破坏。

2. 修正前端Ajax请求代码 #

前端必须明确要求以二进制格式接收响应，不能默认按文本解析（文本解析会把二进制字节转成UTF-8字符串，彻底破坏原始数据）：

方案一：使用XMLHttpRequest #

const xhr = new XMLHttpRequest();
xhr.open('GET', '/get?id=your-file-id', true);
// 核心设置：指定响应类型为Blob
xhr.responseType = 'blob';

xhr.onload = function() {
    if (this.status === 200) {
        const blob = this.response;
        // 可从响应头获取MIME类型：xhr.getResponseHeader('Content-Type')
        const downloadUrl = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = downloadUrl;
        // 可从响应头解析文件名：xhr.getResponseHeader('Content-Disposition')
        a.download = 'target-file-name';
        document.body.appendChild(a);
        a.click();
        // 释放URL对象资源
        URL.revokeObjectURL(downloadUrl);
        document.body.removeChild(a);
    }
};

xhr.send();

方案二：使用Fetch API #

fetch('/get?id=your-file-id', { method: 'GET' })
.then(response => {
    if (!response.ok) throw new Error('请求失败');
    // 直接将响应转为Blob对象
    return response.blob();
})
.then(blob => {
    const downloadUrl = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = downloadUrl;
    // 可从响应头提取文件名：response.headers.get('Content-Disposition')
    a.download = 'target-file-name';
    document.body.appendChild(a);
    a.click();
    URL.revokeObjectURL(downloadUrl);
    document.body.removeChild(a);
})
.catch(err => console.error('下载出错：', err));

关键说明： #

• responseType: 'blob'（XHR）或response.blob()（Fetch）：确保浏览器直接把响应解析为二进制Blob，不做任何文本编码转换，这是避免文件损坏的核心步骤。
• 绝对不要使用responseText或默认的文本解析方式，这会彻底破坏二进制文件的字节结构。

为什么CSV没问题但图片/Zip损坏？ #

CSV是纯文本格式，即使被错误地按文本编码解析再转成Blob，内容依然可读；但图片、Zip这类二进制文件的字节流包含大量非文本字符，当被按UTF-8等文本编码解析时，浏览器会把无法识别的字节替换成占位符（如�），转成Blob时就会引入错误字节，导致文件体积变大且无法正常打开。

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