通过重定向修改S3预签名URL下载文件的文件名有什么更优方案？

你当前使用的window.location.href = result.data.downloadUrl方案遇到的核心问题是：如果文件是浏览器支持预览的格式（图片、PDF、纯文本等），会直接在当前页打开文件而非触发下载，下面是两种无需程序化点击的更优实现：

方案1：前端Fetch + Blob 流下载（无DOM操作） #

该方案全程通过JS原生API实现，不需要创建<a>标签也不需要模拟点击，适合无法调整后端预签名URL生成逻辑的场景：

async function downloadS3File(downloadUrl, customFileName = 'download') {
  try {
    const res = await fetch(downloadUrl);
    if (!res.ok) throw new Error(`下载失败，状态码：${res.status}`);
    const fileBlob = await res.blob();
    const blobUrl = URL.createObjectURL(fileBlob);
    // 直接跳转blob地址触发下载
    window.location.href = blobUrl;
    // 1秒后释放临时URL内存，避免泄漏
    setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
  } catch (err) {
    console.error('文件下载出错：', err);
  }
}

// 调用示例
downloadS3File(result.data.downloadUrl, '报表.xlsx')

方案优势：

• 无任何DOM操作，完全不需要模拟点击逻辑
• 可自定义下载文件名，不受S3源文件名称限制
• 可扩展下载进度监听、失败重试、断点续传等能力

方案2：后端配置预签名URL强制下载（最优性能方案） #

如果可以调整生成预签名URL的后端逻辑，这是成本最低、性能最好的方案：
在生成S3预签名URL时，指定response-content-disposition参数，让S3返回的响应自动携带Content-Disposition: attachment响应头，此时前端直接使用原来的window.location.href跳转就会自动触发下载，不需要任何额外前端逻辑。
后端生成预签名URL的示例（以Node.js AWS SDK v3为例）：

const { S3Client, GetObjectCommand } = require('@aws-sdk/client-s3');
const { getSignedUrl } = require('@aws-sdk/s3-request-presigner');

const s3Client = new S3Client({ region: '你的S3区域' });
const getObjectCmd = new GetObjectCommand({
  Bucket: '你的存储桶名称',
  Key: 'S3上的文件路径',
  // 强制触发下载，同时可指定下载到本地的文件名
  ResponseContentDisposition: 'attachment; filename="季度财务报表.pdf"',
});
// 生成有效期1小时的预签名URL
const downloadUrl = await getSignedUrl(s3Client, getObjectCmd, { expiresIn: 3600 });

方案优势：

• 前端无额外开发量，原有逻辑完全不需要修改
• 不需要前端处理Blob流，大文件下载不会占用前端内存，性能最优
• 无任何前端DOM操作或者JS处理逻辑，兼容性最好

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