当前位置: 首页 > 知识库问答 >
问题:

如何在react js中下载文件

申屠无尘
2023-03-14

当用户点击下载按钮时,文件应该被下载,而不会在新标签中打开文件预览。如何实现这在反应js?

共有3个答案

徐博雅
2023-03-14

从前端触发浏览器下载是不可靠的。

您应该做的是,创建一个endpoint,该endpoint在调用时将提供正确的响应头,从而触发浏览器下载。

前端代码只能做这么多。例如,“下载”属性可能只是在新选项卡中打开文件,具体取决于浏览器。

您需要查看的响应头可能是Content-TypeContent-Displace。你应该检查这个答案以获得更详细的解释。

欧阳飞
2023-03-14

如果您使用的是React路由器,请使用以下命令:

<Link to="/files/myfile.pdf" target="_blank" download>Download</Link>

其中/file/myfile.pdf在您的公共文件夹中。

柳胡媚
2023-03-14

这与反应无关。但是,您可以使用锚

<a href='/somefile.txt' download>Click to download</a>

并非所有浏览器都支持此操作:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

 类似资料:
  • 我想尝试下载图像点击按钮,但是当我点击按钮,所以不是下载图像,而是直接打开图像,但我想做下载图像,所以如何在reactjs下载图像?

  • 我目前正在做一个个人投资组合,我试图制作一个按钮,如果你点击它,应该下载一份简历。 代码 让用户下载该文件。 我在REACTJS中工作,创建react应用程序

  • 问题内容: 我收到来自api的文件网址作为响应。当用户单击“下载”按钮时,应在不打开新选项卡的文件预览的情况下下载文件。如何在React JS中实现这一目标? 问题答案: 从前端触发浏览器下载不可靠。 您应该做的是创建一个端点,该端点在被调用时将提供正确的响应头,从而触发浏览器下载。 前端代码只能做很多事情。例如,取决于浏览器,“下载”属性可能只是在新标签中打开文件。 您需要查看的响应标头可能是和

  • 我正在用连接到Express API服务器的ReactJS前端构建一个应用程序。对API的调用是使用Ajax进行的。 在我的一个视图中,一个表在每一行加载了“导出”链接。导出链接导致一个React路由,该路由调用一个APIendpoint,该endpoint提供一个要下载的CSV文件。 下面是接收数据的JSX:

  • 问题内容: 我正在使用python 2.7请求模块使用以下代码下载二进制文件,如何使此代码从部分下载的文件中“自动恢复”下载。 如果可能的话,我宁愿只使用模块来实现这一目标。 问题答案: 如果Web服务器支持范围请求,则可以将Range标头添加到您的请求中: 您将收到StartPos和StopPos之间的部分。如果不知道StopPos,请使用: 因此您的代码将是:

  • 我正在使用Apache POI生成. xlsx文件。 我想从Spring controller返回该文件。以下是我到目前为止所做的: 控制器: 是否可以从rest控制器返回实际的excel文件,以便用户可以将其下载到计算机上?至于现在控制器返回字节[],但我想返回它的实际文件。我怎样才能做到这一点?