ReactJS通过S3预签名URL下载CSV文件末尾出现乱码问题

文件末尾的乱码不是CSV文件本身的编码错误，是HTTP响应未正确解压导致的二进制内容残留，核心触发点如下：

• 浏览器fetch API默认会自动协商压缩编码、自动解压gzip/br/deflate格式的响应，返回原始文件内容。如果你在请求S3的自定义headers里手动传入了Accept-Encoding字段，浏览器会关闭自动解压逻辑，直接把压缩后的二进制流返回给前端。
• 压缩后的二进制流前半段和CSV纯文本内容重合，所以能正常显示，流尾部的压缩字典、校验位等二进制数据就会显示为无意义乱码。
• 你在download函数里二次封装Blob时强制指定type: 'text/plain'，相当于强制浏览器把未解压的二进制流按纯文本解析，会进一步加剧乱码表现。
• 执行file命令返回data也佐证了文件里混入了非文本的二进制内容，正常UTF-8编码的CSV文件会被识别为UTF-8 Unicode text或ASCII text。

按优先级依次调整即可：

1. 调整S3请求逻辑，不要手动传递Accept-Encoding请求头，把解压逻辑交还给浏览器自动处理：

s3DownloadRequest = async function (url, headers) {
    // 剔除headers中手动配置的Accept-Encoding字段
    const reqHeaders = { ...headers };
    delete reqHeaders['Accept-Encoding'];
    delete reqHeaders['accept-encoding'];
    const response = await fetch(url, { method: 'GET', headers: reqHeaders });
    if (!response.ok) throw new Error(`下载失败，状态码：${response.status}`);
    return response.blob();
}

2. 修正下载触发函数，不要二次封装Blob强制修改MIME类型，直接使用接口返回的Blob对象即可：

function download(blob: Blob, filename: string) {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
}

3. 如果以上调整后问题仍存在，检查后端生成预签名URL的逻辑：不要在预签名请求头中配置和S3存储对象实际元数据不匹配的Content-Encoding字段，保证S3返回的响应头和文件实际内容一致。

调整后重新下载文件，执行file Download.csv返回文本类型标识，打开文件末尾无乱码即为修复成功。

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