下载 mp3 格式的 URL答案

【问题标题】：Download a URL in form of mp3下载 mp3 格式的 URL
【发布时间】：2021-07-26 09:25:56
【问题描述】：

我将这个 mp3 文件存储在我的 firebase 数据库中，当用户点击下载按钮时，我想下载该文件：

我试过了

<a href='https://firebasestorage.googleapis.com/v0/b/soundcloud-9491a.appspot.com/o/Microsoft%20Windows%20XP%20Startup%20Sound.mp3?alt=media&token=31351745-698d-469a-a6b5-86c3076f35f3'>Download</a>

但是当我这样做时，它只在谷歌浏览器中打开了 mp3 视频，并没有下载它。 **编辑有没有办法用音频元素做到这一点？因为默认的音频元素提供了一个下载按钮，是否可以创建一个点击该下载按钮的函数？

【问题讨论】：

如果你想让浏览器下载文件而不是打开它你可以添加<a href="file.whatever" download="filename-on-their-computer.watever">download</a>你也可以在下载属性中省略文件名
@MichaelMano，这不起作用，jsfiddle.net/vqcw6e8r
看这个：stackoverflow.com/questions/49474775/…

标签： javascript html

【解决方案1】：

function forceDownload(blob, filename) {
  var a = document.createElement('a');
  a.download = filename;
  a.href = blob;
  // For Firefox https://stackoverflow.com/a/32226068
  document.body.appendChild(a);
  a.click();
  a.remove();
}

// Current blob size limit is around 500MB for browsers
function downloadResource(url, filename) {
  if (!filename) filename = url.split('\\').pop().split('/').pop();
  fetch(url, {
      headers: new Headers({
        'Origin': location.origin
      }),
      mode: 'cors'
    })
    .then(response => response.blob())
    .then(blob => {
      let blobUrl = window.URL.createObjectURL(blob);
      forceDownload(blobUrl, filename);
    })
    .catch(e => console.error(e));
}

<a href="javascript:downloadResource('https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3', 'best.wav')">Try a successful download</a><br>
<a href="javascript:downloadResource('https://firebasestorage.googleapis.com/v0/b/soundcloud-9491a.appspot.com/o/Microsoft%20Windows%20XP%20Startup%20Sound.mp3?alt=media&token=31351745-698d-469a-a6b5-86c3076f35f3', 'best.wav')">This download will not work since the <code>Access-Control-Allow-Origin</code> header is set.</a>

正常的download 属性将不起作用。您需要使用自定义函数来下载跨域文件。在您的情况下，这无法完成，因为您使用的服务器发送一个 Access-Control-Allow-Origin 标头，这意味着域必须相同。

【讨论】：