反应中的下载按钮答案

【问题标题】：Download button in react反应中的下载按钮
【发布时间】：2021-01-31 16:56:51
【问题描述】：

我想做一个下载按钮。因此，用户可以下载 zip 文件。我将文件存储在 Cloudinary 中。我正在使用 react。我尝试了几种方法来实现它，但我无法做到。当我点击按钮时，它只是像这样扩展路线。

http://localhost:3000/books/dsdfdsdsds 转 http://localhost:3000/books/dsdfdsdsds/https://MY_Cloudinary_Link

<button href="MY_Cloudinary_Link" target="_self" download className="bg-secondary text-white font-bold py-3 px-5 rounded text-2xl focus:outline-none mt-3"><i className="animate-bounce fas fa-arrow-down mr-2"></i>Download</button>

我也尝试了链接标签，但它对我也不起作用。请帮我解决这个问题。

【问题讨论】：

标签： html reactjs jsx cloudinary

【解决方案1】：

您需要删除目标属性并使用 Cloudinary (fl_attachment) 中的 attachment 标志作为您的交付 URL 的一部分。

例如-

<a href="https://res.cloudinary.com/demo/image/upload/fl_attachment/sample.jpg">Download</a>

【讨论】：

谢谢！它适用于图像，但是当我尝试对 zip 文件进行此操作时，它不起作用。它向我显示此错误（找不到此 res.cloudinary.com 页面没有找到该网址的网页）：
我想知道我们需要手动将此标志添加到每个 url，或者有一些方法可以做到这一点。
首先，当访问 ZIP 文件的交付 URL 时，这些 URL 将自动下载，无需此标志。关于 ZIP 文件 URL 不起作用 - 这很可能是由于 Cloudinary 的一项新政策阻止了 2020 年 4 月之后注册的免费帐户的交付 PDF/存档文件。如果您的帐户与该描述相符，那么您需要使用Cloudinary 取消限制。您可以使用 - support.cloudinary.com/hc/en-us/requests/new 提出票证。
在添加标志方面 - 如果您使用 Cloudinary 的 SDK 之一，例如 React 之一 (cloudinary.com/documentation/react_integration)，那么这些 SDK 会提供帮助函数（或 React 案例中的组件）来生成 URL当您将参数传递给它们时为您服务。例如，您可以像这样使用 React SDK 生成上述 sample.jpg URL - ``` ``
感谢您的帮助。我最近创建了自己的帐户。

【解决方案2】：

按钮没有 href 属性。您应该提供 (a) 标记，并在其中添加具有相对或绝对路径的 href 属性。请检查一下。 https://www.w3schools.com/howto/howto_html_download_link.asp

【讨论】：