我从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下载文件,而无需在新的浏览器选项卡中打开文件?
您是否尝试将下载属性添加到锚标记?
<a href={item.mediaUrl} target="_blank" className="ml-2" download>
<i className="fa fa-download"></i></a>
尝试从初始代码中删除target="_blank"
。
即
<a href={item.mediaUrl} className="ml-2" download>
<i className="fa fa-download"></i></a>
你在使用反应路由器吗?如果是这样,你可以尝试下面
import { Link } from 'react-router-dom';
<Link to=`/${item.mediaUrl}` onClick={e => e.preventDefault();}>
<i className="fa fa-download"></i></Link>
链接desc Here