html - 如何为 mp3 文件设置下载属性？

Question

我一直在尝试制作 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>

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

Answer 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));
}

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