无法从 URL 下载图像反应答案

【问题标题】：cannot download image from URL react无法从 URL 下载图像反应
【发布时间】：2020-01-07 08:29:53
【问题描述】：

在我的反应应用程序中，我正在尝试使用以下代码从 S3 URL 下载图像。

<a href={ele.payment_receipt} download target="_blank" class="text-link-3 fw-3 ">
                        <i class="icon-download mr-2"></i>Download</a>

其中ele.payment_receipt 是文件的链接。但是当我点击链接时，它会打开新标签而不是下载它。我尝试过在线解决方案，但所有在线解决方案都使用相同的下载方法，谁能告诉我我在这里做错了什么？提前谢谢

编辑图片的 URL 是 60 秒后过期的 s3 存储桶图片的 SignedUrl。

【问题讨论】：

尝试删除target="_blank"
@HardikChaudhary 现在它在同一个标签而不是新标签中打开图像
工作示例：w3schools.com/tags/tryit.asp?filename=tryhtml5_a_download
@HardikChaudhary 该示例不适用于不同的来源网址reference

标签： javascript reactjs download

【解决方案1】：

您不能使用download 属性来下载不同URL（跨域）中的文件以获取更多信息，您可以refer

您可以做的是进行 API 调用，将其转换为 blob 并下载。您可以参考gist 和working-codesandbox-sample 的操作方法。

【讨论】：

【解决方案2】：

供您参考，Firefox 和 Chrome 65+ 仅支持同源下载链接，这可能是一种安全措施。

Web 超文本应用技术工作组 (WHATWG) 还建议托管相关图像/文件的 Web 服务器需要发送 Content-Disposition HTTP 标头以供下载=使用。

简而言之：

您只能用于强制下载图像/文件，如果：

托管图像/文件的服务器也表示应该下载它，或者图片/文件来自同一个域。

请检查来自服务器的 Content-Disposition 标头是否来自服务器。希望这会有所帮助。

【讨论】：

您可以从以下文章中获得帮助：roytuts.com/download-file-from-server-using-react 但是如果再次向其他域发出请求，则会出现 CORS 问题，这需要与服务器端分开处理以支持CORS。
我已经使用了这个答案stackoverflow.com/a/50405118/8196136。我有 django 后端，它为 s3 对象提供签名 URL，我正在使用该 URL 下载它

【解决方案3】：

一个从客户端缓存下载数据的简单组件（例如flux、redux）。

与 browserify 或 webpack 一起使用的设计。

安装方式：

npm i react-download-link

import DownloadLink from "react-download-link";

<DownloadLink
    label="Save"
    filename="myfile.txt"
    exportFile={() => "My cached data"}
/>

【讨论】：