如何在React中通过JavaScript强制实现文件下载？

修复后的代码 #

const downloadImage = async (imageUrl: string, fileName: string) => {
  try {
    // 跨域请求获取图片Blob
    const response = await fetch(imageUrl, {
      mode: 'cors',
      credentials: 'omit'
    });
    if (!response.ok) throw new Error('图片请求失败');
    
    // 将响应转换为Blob对象
    const blob = await response.blob();
    // 创建Blob临时URL
    const blobUrl = URL.createObjectURL(blob);
    
    // 创建下载链接并触发点击
    const link = document.createElement('a');
    link.download = fileName;
    link.href = blobUrl;
    link.click();
    
    // 释放临时URL资源
    URL.revokeObjectURL(blobUrl);
  } catch (error) {
    console.error('下载出错:', error);
    alert('图片下载失败，请检查网络或稍后重试');
  }
};

问题原因说明 #

1. Content-Disposition头限制：S3默认返回的Content-Disposition为inline，浏览器会直接预览图片而非触发下载；
2. 跨域安全策略：直接使用跨域URL设置a标签href时，浏览器可能因同源策略限制阻止下载行为；
3. 原代码仅通过a标签跳转URL，无法强制浏览器触发下载动作。

调用方式 #

保持原按钮调用逻辑不变即可：

<button className="btn btn-primary btn-sm" onClick={() => downloadImage('你的S3预签名URL', 'image.png')}>
  Baixar arte gráfica
</button>

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