React按钮调用Storage.Get从AWS S3下载文件问题求助

问题根源 #

你当前的代码仅获取并打印了签名URL，但没有主动触发浏览器的下载行为——控制台点击URL是浏览器默认的导航/下载处理，而按钮点击需要你手动发起下载动作。以下是几种可靠的解决方案：

方案1：获取签名URL后创建隐藏a标签触发下载 #

这是最常用的方式，能避免浏览器拦截，且兼容性好：

<Button
  onClick={async () => {
    try {
      // 获取签名URL
      const signedUrl = await Storage.get(this.state.filename, {
        level: 'protected',
        download: false,
        expires: 1000
      });
      // 创建隐藏的a标签触发下载
      const downloadLink = document.createElement('a');
      downloadLink.href = signedUrl;
      downloadLink.download = this.state.filename; // 指定文件名，强制浏览器下载而非预览
      downloadLink.style.display = 'none';
      document.body.appendChild(downloadLink);
      downloadLink.click();
      // 清理DOM
      document.body.removeChild(downloadLink);
    } catch (err) {
      console.error('下载失败:', err);
    }
  }}
>
  下载文件
</Button>

方案2：修复a标签写法（预获取签名URL） #

如果想用a标签的方式，需确保签名URL已提前获取，且添加download属性强制下载：

// 先在组件生命周期中预获取签名URL
async componentDidMount() {
  try {
    const signedUrl = await Storage.get(this.state.filename, {
      level: 'protected',
      download: false,
      expires: 1000
    });
    this.setState({ signedURL: signedUrl });
  } catch (err) {
    console.error('获取签名URL失败:', err);
  }
}

// 渲染部分
{this.state.signedURL && (
  <a 
    href={this.state.signedURL} 
    target="_blank" 
    rel="noreferrer"
    download={this.state.filename} // 关键：强制浏览器下载
  >
    {this.state.filename}
  </a>
)}

方案3：直接获取Blob对象触发下载 #

使用download: true参数让Amplify直接返回Blob对象，无需依赖签名URL：

<Button
  onClick={async () => {
    try {
      // 获取文件Blob对象
      const fileBlob = await Storage.get(this.state.filename, {
        level: 'protected',
        download: true,
        expires: 1000
      });
      // 创建临时URL并触发下载
      const tempUrl = URL.createObjectURL(fileBlob);
      const downloadLink = document.createElement('a');
      downloadLink.href = tempUrl;
      downloadLink.download = this.state.filename;
      downloadLink.style.display = 'none';
      document.body.appendChild(downloadLink);
      downloadLink.click();
      // 清理资源
      document.body.removeChild(downloadLink);
      URL.revokeObjectURL(tempUrl);
    } catch (err) {
      console.error('下载失败:', err);
    }
  }}
>
  下载文件
</Button>

关键注意点 #

• 对于图片、PDF这类浏览器可直接预览的文件，必须添加download属性，否则浏览器会打开预览而非下载
• 避免直接用window.open(signedUrl)，这种方式很容易被浏览器的弹窗拦截机制阻止
• 所有异步操作务必添加错误捕获，避免因网络或权限问题导致组件崩溃

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