Chrome 下载属性不起作用答案

【问题标题】：Chrome Download Attribute not workingChrome 下载属性不起作用
【发布时间】：2014-07-15 09:23:28
【问题描述】：

自最新版本以来，我遇到了 Chrome 的一些意外行为：在 Firefox 中，此代码运行良好：

<a id="playlist" class="button" download="Name.xspf" href="data:application/octet-stream;base64,PD94ANDSOON" style="display: inline;">Download Me</a>

它在 Chrome 中不工作（只需下载一个名为“下载”的文件），但以前工作得很好。我需要改变什么才能让它再次工作？

【问题讨论】：

当您在没有服务器（如本地主机）的情况下打开您的网站时也会发生这种情况，在 VS 代码中安装和使用 Ritiwick Dey 的 Live Server 扩展解决了这个问题，您也可以使用任何其他服务器，如 apache或 xampp，但安装 VS Code 的 Live Server 扩展会更容易、更快捷。

标签： html google-chrome

【解决方案1】：

经过一番研究，我终于找到了你的问题。

下载属性：

如果 HTTP 标头 Content-Disposition: 存在并提供与此属性不同的文件名，则 HTTP 标头优先于此属性。

如果此属性存在且 Content-Disposition: 设置为内联，Firefox 会优先考虑 Content-Disposition，就像文件名的情况一样，而 Chrome 会优先考虑下载属性。

Source

HTTP-Header Content-Disposition

【讨论】：

我的服务器似乎没有发送“Content-Disposition”，并且如您所述，Firefox 不会正确下载文件，但我的问题是相反的：Chrome 不接受下载属性，而 Firefox 可以。即使我只是创建一个简单的 HTML 文件，仅将其作为其内容（并以文件 URL 的形式打开），它在 Chrome 中但在 Firefox 中不起作用。在我更新 Chrome（版本 35.0.1916.114 m）之前它也有效
它在 Chrome 中对我来说也不起作用......我浏览了一些带有“试用”页面的网站，但他们的示例都不起作用，也没有我尝试制作的一些 JSFIDDLE .唯一有效的是 W3Schools 上的 this one。
这似乎是 Chrome 35 版中的一个错误：code.google.com/p/chromium/issues/detail?id=373182
@MrMesees 如果我没记错的话，浏览器不再支持下载属性，除非 href 指向同源的资源。另请参阅下面的答案
如果您可以控制服务器，则可以使用，但不是前端的解决方案。当服务器没有 Content-Disposition 标头时，我仍然无法弄清楚如何在 html 中执行此操作。

【解决方案2】：

阅读 cmets，我遇到了与 @buffer-overflow 相同的问题，并在问题中找到了这个：

我猜网页和下载的来源不同。我们不再尊重跨源请求的下载属性建议文件名。单击该链接仍会启动下载。但文件名仅源自仅取决于服务器的因素（例如响应中的 Content-Disposition 标头和 URL）。

所以我没有机会让它工作...... :(

【讨论】：

HTML5 和 HTML 5.1 的 W3C 建议中没有关于该限制的内容，但您可以在 Mozilla 参考中找到。 “此属性仅适用于同源 URL。” - 来自developer.mozilla.org/en/docs/Web/HTML/Element/a#Attributes
尽管没有 Content-Disposition 标头，但我对 chrome 版本 57 也有同样的问题。我找到的唯一解决方案是让服务器添加 Content-Disposition 标头并在那里指定文件名。
我看到了完全不同的行为......它甚至没有尝试下载，而是表现得好像下载属性不存在，并且正在将页面替换为新形象！

【解决方案3】：

wordpress有这个问题，问题是wordpress生成文件的完整路径，在a标签中你必须删除完整的域名并添加相对路径

示例，而不是：

<a href="http://mywordpresssite.com/wp-content/uploads/file.mp4" download="file.mp4" >

你必须这样做：

<a href="/wp-content/uploads/file.mp4" download="file.mp4">

这将使它工作

【讨论】：

这与原始问题无关，但已经解决了我的生活:)
这里也一样。如果指定了整个域，Chrome 可能会假设它来自不同的域，即使这不是真的。

【解决方案4】：

我有一个关于这个问题的简单解决方案。您只需要将您的 html 文件放入使用 xampp 控件等的 Apache 之类的服务器中。因为下载属性通过服务器正常工作。

<a download href="data:application/octet-stream;base64,PD94ANDSOON">Download Me</a>

【讨论】：

不幸的是，这仅限于 1MB 的数据，至少在 Chrome 73 中是这样

【解决方案5】：

这是 Chrome 中截至 2021 年 8 月 16 日的当前行为

如果您正在调用这样的 api： http://localhost:9000/api/v1/service/email/attachment/dummy.pdf

如果Content-Disposition 未设置或设置为 inline 来自服务器，在这种情况下，pdf 文件的名称将是 dummy.pdf

如果 Content-Disposition 设置为 attachment，则 chrome 将使用 Content-Disposition 标头中的 filename 值保存文件。

如果服务器是这样响应的：

res.setHeader(
  "Content-disposition",
  "attachment; filename=" + "server-dummy.pdf"
);
res.setHeader("Content-Type", "application/pdf");

无论是否存在下载属性，该文件都将保存为 server-dummy.pdf。

【讨论】：

【解决方案6】：

您是通过 Web 服务器还是本地文件系统查看文件 - 浏览器的 URL 栏是否以 http:// 或 file:/// 开头？我刚刚在 Chrome 中运行了一些测试，虽然它会下载文件，但当您使用本地文件时，它不尊重下载属性的值。

如果您开始在网络服务器上托管它，这将开始工作。如果您只是自己在计算机上执行此操作，请查看适用于 Windows 的 WAMP 或适用于 macOS 的 MAMP，以开始使用 Apache。

【讨论】：

【解决方案7】：

我建议使用file-saver NPM 包来实现或强制下载。

// 1.
npm i file-saver // install via npm or
yarn add file-saver // install via yarn

// 2.
import { saveAs } from 'file-saver'

// 3. 
saveAs('https://httpbin.org/image', 'image.jpg')

参考文献

https://www.npmjs.com/package/file-saver
https://www.npmjs.com/package/file-saver#saving-urls // 指向 保存 URLs 的 URL
https://www.javascripting.com/view/filesaver-js

【讨论】：

【解决方案8】：

没有服务器就无法工作。 download 属性只有在使用像 tomcat/xampp/wampserver 这样的服务器（本地/远程）时才会起作用...

<a href="videos/sample.mp4" download>Download Video</a>
<a href="images/sample.jpg" download>Download Image</a>

不仅适用于视频或图像。

【讨论】：

【解决方案9】：

文件必须是某种压缩格式！

【讨论】：

嗨！欢迎来到堆栈溢出！我建议您查看本指南，了解如何给出一个好的答案stackoverflow.com/help/how-to-answer。有时，尽管您可能认为自己给出了正确的解决方案，但您应该尝试解释为什么会出现这种情况，以便为社区提供更多见解。
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案10】：

这可以通过将target="_blank" 属性添加到href 来解决。

像这样：

Save sprites.svg as 
<a target="_blank" download="somefilename.svg"
href="https://cdn.sstatic.net/Img/unified/sprites.svg"
>somefilename.svg</a>

【讨论】：

可以确认，当响应标头未指定文件名时，它适用于 Chrome 72。
不起作用，请先尝试再向他人推荐。
在 Chrome 76、FF 68 和 Edge 上为我工作

【解决方案11】：

转到 Chrome 单击“设置”，您将在 Chrome 浏览器窗口中看到一个新页面弹出。向下滚动到高级设置，找到下载组，然后清除您的自动打开选项。下次您下载某个项目时，它将被保存而不是自动打开。

【讨论】：

非常适合那些不关心下载内容和名称的人——这与我们正在寻求的解决方案相反。