Filepicker v2下载S3存储文件时，如何修改文件名？

我之前在处理S3文件下载自定义文件名的时候踩过类似的坑，结合你用Filepicker v2的场景，给你几个可行的解决方案：

方案一：后端生成带自定义文件名的预签名URL（最可靠） #

你遇到的Forbidden错误大概率是因为直接使用S3对象的公共URL加download属性时，权限配置或跨域策略不允许这种请求。而预签名URL不仅能解决私有文件的访问权限问题，还能在生成时指定下载文件名。

具体步骤：

• 前端把S3中带哈希的文件键（比如abc123-张三简历.pdf）和你想要的目标文件名（比如张三简历.pdf）传给后端
• 后端用AWS SDK生成预签名URL时，添加ResponseContentDisposition参数，强制浏览器使用指定文件名下载
• 后端把生成好的URL返回给前端，直接用这个URL作为下载链接即可，无需额外加download属性

举个Node.js的代码示例（AWS SDK v2）：

const AWS = require('aws-sdk');
// 初始化S3客户端，确保配置了正确的凭证和区域
const s3 = new AWS.S3({ region: 'us-east-1' });

exports.getCustomDownloadUrl = (req, res) => {
  const { s3Key, desiredFilename } = req.query;
  const params = {
    Bucket: '你的S3存储桶名称',
    Key: s3Key,
    // 指定下载时的文件名
    ResponseContentDisposition: `attachment; filename="${desiredFilename}"`,
    Expires: 3600 // URL有效期，可根据需求调整
  };

  const presignedUrl = s3.getSignedUrl('getObject', params);
  res.send({ url: presignedUrl });
};

方案二：调整S3 CORS配置配合前端download属性 #

如果不想改动后端，可以尝试调整S3桶的CORS规则，允许前端请求携带Content-Disposition相关的头，同时确保文件的访问权限允许前端域名的请求。

S3 CORS配置示例（JSON格式） #

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET"],
    "AllowedOrigins": ["https://你的前端域名.com"],
    "ExposeHeaders": ["Content-Disposition"]
  }
]

前端下载链接写法 #

<a href="https://你的S3桶域名/abc123-张三简历.pdf" download="张三简历.pdf">下载我的简历</a>

⚠️ 注意：这个方案的局限性比较大——如果你的S3文件是私有访问的，直接的URL会没有权限；部分浏览器对跨域的download属性支持也不够友好，还是可能出现权限错误。

方案三：前端通过Fetch API转Blob下载 #

这种方式是前端主动请求文件内容，转成Blob后再触发下载，绕开直接访问S3 URL的权限问题，但适合小文件（大文件可能有性能压力）。

代码示例：

async function downloadResume(s3Url, targetFilename) {
  try {
    const response = await fetch(s3Url, {
      method: 'GET',
      // 如果你的文件需要身份验证，这里要配置对应的凭证
      credentials: 'include'
    });

    if (!response.ok) {
      throw new Error('文件请求失败，请检查权限');
    }

    const blob = await response.blob();
    const tempUrl = URL.createObjectURL(blob);
    
    // 创建临时a标签触发下载
    const downloadLink = document.createElement('a');
    downloadLink.href = tempUrl;
    downloadLink.download = targetFilename;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    
    // 清理临时资源
    URL.revokeObjectURL(tempUrl);
    document.body.removeChild(downloadLink);
  } catch (error) {
    console.error('下载出错：', error);
    alert('下载失败，请稍后重试');
  }
}

// 调用示例
downloadResume('https://你的S3桶域名/abc123-张三简历.pdf', '张三简历.pdf');

同样，这个方案需要确保S3的CORS配置允许前端域名的GET请求，否则还是会出现Forbidden错误。

综合来看，方案一的预签名URL方式是最稳定可靠的，既解决了权限问题，又能完美自定义下载文件名，不受浏览器跨域限制。

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