强制外部下载地址 [英] Force external download url

问题描述

我想在我的网页上托管一个包含 mp3 文件的外部 url.问题是单击该链接将打开播放器，我必须右键单击并将链接另存为"才能下载文件.有没有办法强制下载文件?

我不想下载文件然后使用标题强制下载.

解决方案

现在 HTML5 规范定义超链接上一个非常有用的 download 属性，它基本上允许在客户端强制下载行为，而不管 Content-Type 和 Content-Disposition:

<块引用>

在某些情况下，资源旨在供以后使用而不是即时观看.指示资源旨在下载供以后使用，而不是立即使用，download可以在 a 或 area 元素上指定创建超链接到该资源.

<...>

<块引用>

download 属性，如果存在，表明作者打算用于下载资源的超链接.该属性可能有一个价值；该值(如果有)指定默认文件名作者推荐用于在本地文件中标记资源系统.

所以您需要做的就是将属性添加到您的超链接中，并且支持它的浏览器会理解需要下载内容:

<a href="http://example.com/media.mp3" 下载>下载您的文件</a>

您甚至可以通过设置属性值为下载的文件建议一个不同的名称:

<a href="http://example.com/media.mp3" download="check this out.mp3">下载您的文件</a>

更多信息和演示:

• 以 HTML5 格式下载资源:a[download] (HTML5岩石)
• HTML5 下载属性(大卫·沃尔什)

浏览器支持:caniuse.com

<小时>

下载生成的内容

您甚至可以制作一个链接来下载您生成的内容，只要有办法为其获取 base64 编码的数据 URI:

<a href="data:application/octet-stream;base64,YOUR_ENCODED_DATA" download="song.mp3">下载</a>

有关保存生成内容的更多详细信息，请参阅 Eli Grey 的这篇文章:

在客户端保存生成的文件

I want to host on my webpage an external url containing a mp3 file. The problem is that clicking on that link will open the player, i have to right click and "Save link as" in order to download the file. Is there any solution to force the file download?

I don't want to download the file and then use headers to force the download.

解决方案

Now the HTML5 spec defines a very useful download attribute on hyperlinks that basically allows to force download behavior on client-side, regardless of what comes in Content-Type and Content-Disposition from the server:

In some cases, resources are intended for later use rather than immediate viewing. To indicate that a resource is intended to be downloaded for use later, rather than immediately used, the download attribute can be specified on the a or area element that creates the hyperlink to that resource.

<...>

The download attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. The attribute may have a value; the value, if any, specifies the default filename that the author recommends for use in labeling the resource in a local file system.

So all you need to do is add the attribute to your hyperlink and the browsers that support it would understand that the content needs to be downloaded:

<a href="http://example.com/media.mp3" download>Download Your File</a>

You can even suggest a different name for the downloaded file by setting the attribute value:

<a href="http://example.com/media.mp3" download="check this out.mp3">Download Your File</a>

More info and demos:

• Downloading resources in HTML5: a[download] (HTML5 Rocks)
• HTML5 download Attribute (David Walsh)

Browser support: caniuse.com

---

Downloading generated content

You can even make a link that will download a content that you generated, as long as there is a way to get a base64-encoded data URI for it:

<a href="data:application/octet-stream;base64,YOUR_ENCODED_DATA" download="song.mp3">Download</a>

For more details on saving generated content, refer to this article by Eli Grey:

Saving generated files on the client-side

这篇关于强制外部下载地址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！