强制外部下载链接

Question

我希望在我的网页上托管一个包含mp3文件的外部url。问题是点击链接会打开播放器，我必须右键点击并选择“另存为”才能下载文件。是否有解决方法可以强制下载文件？

我不想下载文件然后使用头部信息来强制下载。

- keepwalking

Answer 1

现在，HTML5规范定义了一个非常有用的download属性，可在超链接上使用，可以在客户端强制执行下载行为，而不管服务器返回的Content-Type和Content-Disposition是什么：

在某些情况下，资源是供以后使用而不是立即查看的。要指示资源是供以后下载而不是立即使用的，可以在创建到该资源的a或area元素上指定download属性。

<...>

download属性（如果存在）表示作者打算将超链接用于下载资源。该属性可能具有一个值；如果有，则该值指定作者建议在本地文件系统中用于标记资源的默认文件名。

所以，您只需要在超链接中添加此属性，支持它的浏览器会理解需要下载内容：

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

您甚至可以通过设置属性值来提出下载文件的不同名称：

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

更多信息和演示：

• HTML5中的资源下载：a[download]（HTML5 Rocks）
• HTML5下载属性（David Walsh）

浏览器支持：caniuse.com

---

下载生成的内容

你甚至可以创建一个链接来下载你生成的内容，只要有一种方法可以获取其base64编码的数据URI：

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

有关保存生成内容的详细信息，请参阅Eli Grey的本文

- Dmitry Pashkevich

---

如果用户在页面加载后生成mp3文件怎么办？如果您创建一个“虚假”的锚标签并使用jquery“click”它，它不起作用...我该如何使用JS实现相同的效果并强制下载？可能不可能？ - trainoasis

@trainoasis 如果你可以获得生成的mp3的Data URI，那么你就可以生成一个链接（我相信你可以）。请参阅我的更新答案。 - Dmitry Pashkevich

请注意，这仅适用于相同源的URL：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a - Crashalot

@Crashalot，有没有办法使用跨域URL来完成这个操作？ - krummens

你可以使用JavaScript将任何外部图片URL转换为Base64格式，然后将其设置为href属性。 - Brentspine

Answer 2

编辑：以下答案仅适用于您仅能控制目标MP3文件的情况，如果它是一个外部链接则不适用

链接不应直接指向MP3文件，而应该指向一段逻辑代码（例如您是否使用ASPX？在这种情况下，您可以将一个.aspx页面作为目标，或者您可以为.mp3扩展名创建一个HTTP处理程序），该逻辑代码添加了一个包含以下行的HTTP头到输出中：

Content-Disposition: attachment;filename="whatever.mp3";

这将指示浏览器将输出内容视为要在本地保存的文件。

- Roy Dictus

---

该URL是外部的，我无法更改该文件的标头。 - keepwalking

如果是外部的话，我认为你无能为力。 - Roy Dictus

我已经在问题中指明了。无论如何还是谢谢。 - keepwalking

那么这就是你的答案：它是一个外部链接，超出了你的控制范围。很遗憾，你无能为力。 - Roy Dictus

Answer 3

使用JavaScript这对我起作用了

<a onclick="saveFile('url')">Download</a>

<script>
    function saveFile(url) {
    // Get file name from url.
    var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0];
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
        var a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhr.response); // xhr.response is a blob
        a.download = filename; // Set the file name.
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        delete a;
    };
    xhr.open('GET', url);
    xhr.send();
    }
</script>

点击 <a> 标签将直接下载您的文件。

- Bruno

---

通常由于CORS而无法正常工作。 - Arvy

本地使用过xampp服务器。 - MD TAREK HOSSEN