Reactjs 下载没有锚标记或没有在新选项卡中打开文件的文件

Question

我从 API 获取文件 url，例如“ http://example.com/sample.jpg ”。这是我当前的代码：

<a href={item.mediaUrl} target="_blank" className="ml-2">
<i className="fa fa-download"></i></a>

但我想直接下载文件，而不在新的浏览器选项卡中打开文件。我还尝试了按钮上的 onClick 事件：

//HTML
<button onClick={() => this.downloadFile(item.mediaUrl)}>Download</button>
//Function
downloadFile = (url) => {
   window.open(url);
}

这也会在新的浏览器选项卡中打开文件。如何直接在reactjs中从url下载文件，而不在新的浏览器选项卡中打开文件？

Answer 1

您是否尝试将下载属性添加到锚标记？

<a href={item.mediaUrl} target="_blank" className="ml-2" download>
<i className="fa fa-download"></i></a>