如何通过PreSignedUrl实现S3文件直接下载而非浏览器打开

问题根源 #

之前用a标签触发时浏览器自动预览文件，是因为PDF、图片、文本这类可预览格式会被浏览器默认打开；Blob方式的延迟问题则是因为要把整个文件拉到前端内存中转，完全没必要。

最优解决方案 #

在后端生成预签名URL时添加强制下载参数，前端拿到URL后直接触发下载，既不用加载文件到内存，也不会让浏览器预览内容。

1. 后端生成带下载参数的预签名URL #

无论使用哪种语言的AWS SDK，生成预签名URL时都要加入ResponseContentDisposition参数，值设为attachment; filename="你的文件名"。以下是JS SDK v3的示例：

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

const s3Client = new S3Client({ region: "你的区域" });

async function getDownloadUrl(bucket, fileKey, displayName) {
  const command = new GetObjectCommand({
    Bucket: bucket,
    Key: fileKey,
    // 核心配置：强制浏览器以下载方式处理文件
    ResponseContentDisposition: `attachment; filename="${displayName}"`
  });
  return getSignedUrl(s3Client, command, { expiresIn: 3600 }); // URL1小时后过期
}

Python、Java等SDK同理，找到对应请求参数添加该配置即可。

2. 前端触发下载的两种方式 #

拿到后端返回的预签名URL后，用以下方法触发下载，不会跳转页面也不会打开预览：

方式一：隐藏a标签（推荐，无弹窗拦截风险）

async function downloadFile() {
  // 向后端请求带下载参数的预签名URL
  const resp = await fetch("/api/get-s3-download-url", {
    method: "POST",
    body: JSON.stringify({ fileKey: "S3存储的文件路径" })
  });
  const { presignedUrl } = await resp.json();

  // 创建临时a标签触发下载
  const link = document.createElement("a");
  link.href = presignedUrl;
  link.style.display = "none";
  link.download = "可选自定义文件名"; // 兜底配置，实际以URL中的参数为准
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

方式二：window.open（注意弹窗拦截）

如果不想操作DOM，可直接用window.open，但必须在用户主动点击事件里调用（否则会被浏览器拦截）：

async function downloadFile() {
  const resp = await fetch("/api/get-s3-download-url", {
    method: "POST",
    body: JSON.stringify({ fileKey: "S3存储的文件路径" })
  });
  const { presignedUrl } = await resp.json();
  
  window.open(presignedUrl, "_blank");
}

3. 确认S3 CORS配置 #

确保你的S3桶CORS策略允许前端域名的GET请求，示例配置如下：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>https://你的前端域名</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <!-- 可选：暴露Content-Disposition头，方便前端获取文件名 -->
    <ExposeHeader>Content-Disposition</ExposeHeader>
  </CORSRule>
</CORSConfiguration>

方案优势 #

• 大文件无延迟：浏览器直接与S3建立连接下载，无需经过前端内存中转。
• 强制下载不预览：通过预签名URL的参数直接指定浏览器行为，无需前端额外处理。
• 无跨域问题：只要CORS配置正确，全程不会出现跨域报错。

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