Question

自最新版本以来，我遇到过Chrome的一些意外行为：在Firefox中，此代码工作正常：

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

它无法在Chrome中运行（只需下载名为“下载”的文件），但以前工作得很好。我有什么要改变它再次起作用？

Answer 1

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

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

所以我没有机会让它发挥作用...... :(

Answer 2

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

＆LT a取代;下载属性：

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

如果此属性存在且Content-Disposition：设置为内联，则Firefox优先考虑Content-Disposition，例如文件名大小写，而Chrome优先考虑下载属性。

Source

HTTP-Header Content-Disposition

Answer 3

这可以通过向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>

Answer 4

关于此问题，我有一个简单的解决方案。您只需要使用xampp控件等将html文件放入Apache之类的服务器即可。因为download属性在服务器上正常工作。

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

Answer 5

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

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

Answer 6

我建议使用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 //将网址直接指向保存URL
https://www.javascripting.com/view/filesaver-js

Answer 7

我在wordpress上遇到了问题，问题在于wordpress会生成文件的完整路径，并且在标记中，您必须删除完整的域名并添加相对路径

示例，而不是：

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

您必须这样做：

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

这将使其正常工作

Answer 8

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

Chrome下载属性不起作用

8 个答案: