Reactjs下载文件没有锚标记或没有在新标签中打开文件

Question

我从API获取文件网址 例如'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>

Answer 2

尝试从初始代码中删除target="_blank"。

即。

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

Answer 3

您使用的是反应路由器吗？如果是这样，你可以尝试下面的

import { Link } from 'react-router-dom';

<Link to=`/${item.mediaUrl}` onClick={e => e.preventDefault();}>
<i className="fa fa-download"></i></Link>

链接desc Here