HTML 在 2023 年强制下载 mp3 文件

Question

2023年可以直接下载.mp3文件吗？ 现在浏览器在浏览器上播放歌曲，我需要下载它！

有什么解决办法吗？ JS 对我来说没问题。

这不起作用：

<a href="https://link_mp3.mp3" download="name_file.mp3">Download!</a>

Answer 1

出于安全原因，

download

属性仅适用于从同源下载，也许这就是您的问题？

尽管如此，还是有一些替代方法可以解决这个问题：

方法 1，使用

fetch

并在 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 downloadResourceFromUrl(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);
    });
}

然后在 HTML 中单击锚点时调用

downloadResourceFromUrl

方法：

<a href="#" onClick="javascript:downloadResourceFromUrl('https://www.yoursite.com/name_file.mp3')">Download!</a>

方法 2，使用标头从后端（如果有的话）强制下载：

如果您从后端返回文件，您可以尝试将以下标头添加到返回文件的任何端点：

• 内容类型：应用程序/八位字节流
• 内容-描述：文件传输
• Content-Disposition：附件；文件名=your_file.mp3