Javascript 如何在react js中下载文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50694881/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to download file in react js
提问by Sameer Thite
I receive file url as response from api. when user clicks on download button, the file should be downloaded without opening file preview in a new tab. How to achieve this in react js?
我收到文件 url 作为来自 api 的响应。当用户单击下载按钮时，应下载文件而无需在新选项卡中打开文件预览。如何在 react js 中实现这一点？
采纳答案by Hymanyef
Triggering browser download from front-end is not reliable.
从前端触发浏览器下载是不可靠的。
What you should do is, create an endpoint that when called, will provide the correct response headers, thus triggering the browser download.
您应该做的是，创建一个端点，当调用该端点时，将提供正确的响应标头，从而触发浏览器下载。
Front-end code can only do so much. The 'download' attribute for example, might just open the file in a new tab depending on the browser.
前端代码只能做这么多。例如，“下载”属性可能只是根据浏览器在新选项卡中打开文件。
The response headers you need to look at are probably Content-Typeand Content-Disposition. You should check this answerfor more detailed explanation.
您需要查看的响应标头可能是Content-Type和Content-Disposition。您应该查看此答案以获取更详细的解释。
回答by lipp
This is not related to React. However, you can use the downloadattribute on the anchor <a>element to tell the browser to download the file.
这与 React 无关。但是，您可以使用download锚<a>元素上的属性来告诉浏览器下载文件。
<a href='/somefile.txt' download>Click to download</a>
This is not supported on all browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
并非所有浏览器都支持此功能：https: //developer.mozilla.org/en-US/docs/Web/HTML/Element/a
回答by Mohammad altenji
browsers are smart enough to detect the link and downloading it directly when clicking on an anchor tag without using the download attribute.
浏览器足够聪明，可以在不使用下载属性的情况下单击锚标记时直接检测链接并下载它。
after getting your file link from the api, just use plain javascript by creating anchor tag and delete it after clicking on it dynamically immediately on the fly.
从 api 获取文件链接后，只需通过创建锚标记来使用普通的 javascript，并在动态单击后立即将其删除。
const link = document.createElement('a');
link.href = `your_link.pdf`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
回答by Javier López
If you are using React Router, use this:
如果您使用的是 React Router，请使用以下命令：
<Link to="/files/myfile.pdf" target="_blank" download>Download</Link>
Where /files/myfile.pdfis inside your publicfolder.
/files/myfile.pdf您的public文件夹中的何处。
回答by dodobrat
React gives a security issue when using atag with target="_blank".
React 在使用a带有target="_blank".
I managed to get it working like that:
我设法让它像这样工作：
<a href={uploadedFileLink} target="_blank" rel="noopener noreferrer" download>
<Button>
<i className="fas fa-download"/>
Download File
</Button>
</a>
回答by Hamid Shoja
You can define a component and use it wherever.
您可以定义一个组件并在任何地方使用它。
import React from 'react';
import PropTypes from 'prop-types';
export const DownloadLink = ({ to, children, ...rest }) => {
return (
<a
{...rest}
href={to}
download
>
{children}
</a>
);
};
DownloadLink.propTypes = {
to: PropTypes.string,
children: PropTypes.any,
};
export default DownloadLink;
