如何使用JavaScript/jQuery动态下载服务器上的MP3文件

你当前代码已经完成了MP3文件的Blob格式拉取、临时对象URL创建，只需要补充临时锚点触发逻辑即可唤起浏览器下载，完整实现代码如下：

$("#downloadBtn").on("click",function(){
  console.log("start download");
  jQuery.ajax({
    url: "http://example.com/test.mp3",
    xhrFields:{
        responseType: 'blob'
    },
    success: function(data){            
      console.log("success");
      // 生成Blob临时访问地址
      const blobUrl = window.URL.createObjectURL(data);
      // 创建临时a标签用于触发下载
      const downloadAnchor = document.createElement('a');
      // 指定下载保存的默认文件名
      downloadAnchor.download = 'test.mp3';
      downloadAnchor.href = blobUrl;
      // 临时插入DOM触发点击，不会产生可见渲染
      document.body.appendChild(downloadAnchor);
      downloadAnchor.click();
      // 清理临时DOM，释放Blob内存占用
      document.body.removeChild(downloadAnchor);
      window.URL.revokeObjectURL(blobUrl);
    }
  });
});

关键注意点 #

• 资源所在服务器必须配置正确的CORS响应头，允许当前页面域名发起跨域请求，否则Blob请求会被浏览器安全策略拦截，该问题无法通过纯前端代码解决
• download属性可自定义用户保存文件时的默认文件名，按需修改即可
• 下载触发后必须调用revokeObjectURL释放Blob引用，否则大文件场景下会造成不必要的内存占用
• 不要给临时a标签设置display: none隐藏属性，部分旧版本移动端浏览器、Safari会忽略不可见元素的点击事件，临时插入后立即移除不会造成页面闪烁

内容的提问来源于stack exchange，提问作者whitebear