以前下载一个文件，一般就是通过后端提供接口，或者通过window.open来下载，但是随着需求的发展，文件会动态生成或者文件会存放在一个专门的静态服务器上面，这个时候就需要前端直接下载了，通过window.open这种方式已经不能满足了，因为它只是打开一个新的页面，不是真正的下载。
事实上跳转后是MP3的播放页面，并不是直接下载，而且而且有兼容性问题。
利用 Blob对象进行下载
Blob（Binary Large Object）翻译成中文就是大型的二进制对象，不仅仅在js中有，在各种语言中都有，它是一种通用的数据格式
源码如下，源码中规避了一些兼容性问题，如微信、钉钉、QQ不支持直接下载，检测环境后会提示复制代码到自带浏览器中打开下载。
<div class="down-audio xiazai" href="javascript:;" data-href="https://cdn.xxxx.cn/test.mp3" data-name="
test.mp3">
<img src="/guangwangmobile/audiom/picture/ic_download_audio_3.png">
<div class="down-audio-text">下载音频</div>
</div>
<script src="/static/js/layui/layui.all.js" type="text/javascript"></script>
<script>
layui.use(['layer', 'form'], function () {
var layer = layui.layer, form = layui.form;
$('.xiazai').on('click', function() {
var userAgentStr = window.navigator.userAgent;
// alert(userAgentStr);
if(/MicroMessenger/.test(userAgentStr)){
// c=$(this).attr('data-href');
var currentPageUrl = window.location.href;
navigator.clipboard.writeText(currentPageUrl).then(function() {
layer.msg("链接复制成功，请通过手机自带浏览器下载", { time: 3000});
return false;
}).catch(function(error) {
layer.msg("请复制链接在手机自带浏览器打开", { time: 3000});
return false;
});
}else if(/DingTalk/.test(userAgentStr)||/baidu/.test(userAgentStr)||/QQ/.test(userAgentStr)){
var currentPageUrl = window.location.href;
$("#hide").attr('value',currentPageUrl);//这里可以获取动态数据赋值给$("#hide").val()
$("#hide").select();
try {var state = document.execCommand("copy");}
catch(err){var state = false;}
if(state){
layer.msg("链接复制成功，请通过手机自带浏览器下载", { time: 3000});
return false;
}else{
layer.msg("请复制链接在手机自带浏览器打开", { time: 3000});
return false;
}
}else{
//方法一
var url=$(this).attr('data-href');
var name=$(this).attr('data-name');
fetch(url)
.then(res => res.blob())
.then(blob => {
const a = document.createElement("a");
const objectUrl = window.URL.createObjectURL(blob);
a.download = name;
a.href = objectUrl;
a.click();
window.URL.revokeObjectURL(objectUrl);
a.remove();
})
//方法二
// var url=$(this).attr('data-href');
// var name=$(this).attr('data-name');
// var type=$(this).attr('data-type');
// const x = new XMLHttpRequest()
// x.open("GET", url, true)
// x.responseType = "blob"
// // x.setRequestHeader('Content-type', 'audio/mp3');
// x.onload = function () {
// const blob = x.response
// const url = window.URL.createObjectURL(blob)
// // 判断是否是IE浏览器
// if (window.navigator.msSaveBlob) {
// try {
// window.navigator.msSaveBlob(blob, name)
// } catch (e) {}
// } else {
// const a = document.createElement("a");
// document.body.appendChild(a);
// a.href = url;
// a.download = name;
// a.click();
// document.body.removeChild(a);
// window.URL.revokeObjectURL(url);
// }
// }
// x.send();
}
})
});
</script>