React.js实现无锚点、不打开新标签页直接下载文件

针对你的需求，这里有几个实用的解决方案，适配React类组件场景：

方案1：直接利用<a>标签的download属性 #

这是最简洁的原生方法，只需要给你的原有<a>标签加上download属性即可。如果需要指定下载后的文件名，可以给download传一个自定义值：

<a 
  href={item.mediaUrl} 
  className="ml-2"
  download={item.fileName || 'downloaded-file'} // 可选：指定下载后的文件名
>
  <i className="fa fa-download"></i>
</a>

⚠️ 注意：如果文件URL是跨域的，这个属性可能不会直接生效（浏览器会默认打开文件）。这种情况下需要后端配合，在响应头里设置Content-Disposition: attachment; filename="your-file-name.ext"，强制浏览器触发下载行为。

方案2：通过JavaScript创建隐藏的<a>标签触发下载 #

如果你的场景需要更灵活的控制（比如处理跨域、自定义下载前后的逻辑），可以写一个downloadFile函数，通过动态创建a标签并模拟点击来实现：

// HTML部分
<button onClick={() => this.downloadFile(item.mediaUrl, item.fileName)} className="ml-2">
  <i className="fa fa-download"></i>
</button>

// 类组件中的函数
downloadFile = (url, fileName = 'downloaded-file') => {
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

这个方法兼容性好，还能在下载前后添加额外逻辑（比如显示加载状态、记录下载日志等）。

跨域文件的额外处理 #

如果你的文件存储在第三方域名下，除了后端设置Content-Disposition头，还可以考虑通过Blob转换来实现下载（前提是目标服务器配置了CORS允许跨域请求）：

downloadFile = async (url, fileName = 'downloaded-image') => {
  try {
    const response = await fetch(url);
    const blob = await response.blob();
    const blobUrl = URL.createObjectURL(blob);
    
    const link = document.createElement('a');
    link.href = blobUrl;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    
    document.body.removeChild(link);
    URL.revokeObjectURL(blobUrl); // 释放Blob占用的内存
  } catch (error) {
    console.error('下载失败:', error);
    // 这里可以添加错误提示逻辑，比如弹出提示框告知用户
  }
}

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