如何为 mp3 文件设置下载属性？答案

【问题标题】：How to make a download attribute for an mp3 file?如何为 mp3 文件设置下载属性？
【发布时间】：2020-05-23 11:37:15
【问题描述】：

我一直在尝试创建一个 mp3 文件的下载链接，但我似乎什么也没做。 mp3 文件在正确的位置，但是当我单击它时，它只是在一个播放音频文件的新选项卡中打开。文件位置是这样的：

<a href="forsongstab/tracks/Villagers of Ioannina City - Age of Aquarius - 01 Welcome.mp3" download="Villagers of Ioannina City - Age of Aquarius - 01 Welcome"><img class="dli" src="../images/downloadicon.jpeg">01. Welcome</a>

如果有人能找到解决方法，请告诉我。谢谢！

【问题讨论】：

标签： html css download attributes mp3

【解决方案1】：

仅使用 javascript 的解决方案：

function downloadBlob(blob, filename) {
  var a = document.createElement('a');
  a.download = filename;
  a.href = blob;
  document.body.appendChild(a);
  a.click();
  a.remove();
}

function downloadResource(url) {
  filename = url.split('\\').pop().split('/').pop();
  fetch(url, {
      mode: 'no-cors'
    })
    .then(response => response.blob())
    .then(blob => {
      let blobUrl = window.URL.createObjectURL(blob);
      downloadBlob(blobUrl, filename);
    })
    .catch(e => console.error(e));
}

&lt;a href="#" onClick="javascript:downloadResource('https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3')"&gt;01. Welcome&lt;/a&gt;

【讨论】：

非常感谢您的帮助！两周来我一直在努力寻找解决方案，这是我找到的最简单和最接近的解决方案。谢谢！
您好，我又有一个问题。该链接工作正常，但您知道如何从文件夹中添加位置吗？我试过这样``` 01.欢迎 ```如果你能再次帮助我，我将非常感激。谢谢。
好代码！能够在 Wix mp3 下载中实现这一点。
由于某种原因下载的文件是 0KB....

【解决方案2】：

您需要将此 HTTP 标头添加到您的响应中以使浏览器强制下载：

Content-Disposition: attachment; filename=your_filename.mp3

例如，如果您在服务器端使用 PHP，您可以创建一个脚本，发送上述标头后跟实际文件内容：

$path = $_GET['path'];
header('Content-Disposition: attachment; filename=' . basename($path));
readfile($path);

如果您将此脚本称为 download.php，则链接到 download.php?path=/path/to/your/file.mp3 将使浏览器弹出 file.mp3 的下载对话框。

【讨论】：

感谢您的回复，但我对 html 和 css 真的很陌生，所以我无法真正理解所有这些。您能否更好地向我解释一下，也许可以告诉我我能做些什么来解决我的问题？这真的会帮助我。谢谢。
在这种情况下，最好只配置 Web 服务器。如果尚未使用 PHP，则无需 PHP。

【解决方案3】：

.then(response => response.blob()) 没有返回

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。