如何解析浏览器GET AWS S3 URI返回的二进制数据并触发下载？

问题根本原因 #

1. 你对<a>标签download属性的理解正确：该属性仅对同源资源生效，跨域的S3资源会被浏览器直接打开，不会触发下载提示。
2. 你当前拿到的乱码内容不是base64编码，是axios默认将二进制响应按UTF-8格式解析为字符串导致的乱码，无法直接用base64相关方法处理。
3. 你之前能用相同写法渲染图片属于巧合，大概率是图片内容的二进制被错误转码后刚好符合base64格式的边界情况，不可复用在PDF场景。

最优解决方案（推荐，无需前端处理二进制） #

直接在服务端生成S3预签名URL时，添加response-content-disposition参数，示例逻辑（Node.js AWS SDK v3为例）：

import { GetObjectCommand, S3Client } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";

const command = new GetObjectCommand({
  Bucket: "你的桶名",
  Key: "文件key",
  // 新增这一行，指定返回时触发下载，还可以自定义文件名
  ResponseContentDisposition: `attachment; filename="自定义文件名.pdf"`,
});

const signedUrl = await getSignedUrl(s3Client, command, { expiresIn: 3600 });

生成的signedUrl直接放到<a href={signedUrl}>标签里即可，用户点击后会直接弹出下载提示，无需任何前端额外处理，大文件加载性能远优于前端下载后转Blob的方案。

前端临时处理方案（如果无法修改服务端签名逻辑） #

修改你的axios请求配置，明确指定responseType为blob，直接获取二进制Blob对象，无需自己转码：

axios.get(attachment.fileUrl, {
  responseType: 'blob', // 关键配置，告诉axios不要解析为字符串，直接返回Blob
  headers: {Authorization: ''}
}).then(res => {
  // 直接用返回的Blob生成下载链接
  const blobUrl = URL.createObjectURL(res.data);
  const a = document.createElement('a');
  a.href = blobUrl;
  a.download = '自定义文件名.pdf';
  a.click();
  // 释放内存
  URL.revokeObjectURL(blobUrl);
})

关于你遇到的编码问题解释 #

AWS S3返回的原始响应就是标准的二进制流，你之前拿到的乱码是axios默认按responseType: 'text'解析的结果，把二进制字节强行按UTF-8转成了字符串，所以包含大量非Latin1字符，传给atob自然会报错。按上述方案指定responseType后即可直接拿到正确的二进制对象，不需要手动做编码转换。

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