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

【问题标题】：Reactjs download file without anchor tag or without opening a file in new tabReactjs 下载文件没有锚标记或没有在新选项卡中打开文件
【发布时间】：2018-04-26 08:08:00
【问题描述】：

我从 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 下载文件，而不在新的浏览器选项卡中打开文件？

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

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

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

【讨论】：

在锚点中添加了下载，但结果相同，文件正在新的浏览器选项卡中打开。
@SameerThite 您是否也删除了您的downloadFile 功能？
是的，我删除了 onClick downloadFile 函数...使用了 href、target 或 onClick 函数

【解决方案2】：

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

即

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

【讨论】：

试过了，然后文件预览会在同一个浏览器选项卡中打开并替换我的应用程序页面。

【解决方案3】：

你在使用反应路由器吗？如果可以，你可以试试下面的

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

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

链接描述Here

【讨论】：

目标 _blank 在新选项卡中打开链接，这不是 OP 想要的