浅谈一下关于a链接通过下载链接下载文件的方法
最后更新：2021/02/15/ 20:10:17
群友今天让我帮忙改一下他站点下载音频文件的方法，为此有了这篇心得。
首先当我通过api请求后端时，后端返回的其实是一个键值对对象，里面并没有实际的文件，只有一个url下载地址。
https://xxxxxxasdasdas.mp3大概是这么一个地址段，可能会更长一些，总体是差不多。
当时我想得挺简单，我直接就将这个url地址赋值给a元素href，然后a.click触发下载，但是实际上并不会下载，谷歌浏览直接就给你打开这个文件了。
如果需要a链接下载这个文件，我们需要先将文件下载下来，然后本地转成url地址，再赋值给a元素，再click即可。
于是代码如下：
//我的下载方法
function myDownload(url,fileName) {
if(url) {
fetch(url,{method: "GET",}).then(res=>{
return res.blob();
}).then(blob=>{
let a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = fileName;
a.style.display = "none";
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(a.href); // 释放URL 对象
a.remove();
}).catch(err=>{
console.log(err);
})
}
}需要注意的是，fileName为文件名，记得是带有文件格式后缀的，如：xxx.mp3
这样下载下来的文件才是正确的，不然下载完还要手动改后缀名，麻烦，也不符合要求。
如何获取文件后缀名
以上面那个mp3文件链接为例，他的末尾是带有文件格式的，我们可以通过字符串方法快速拿到后缀名
const url = "http://xxxxxx.mp3";
const fileName = url.split(".").pop(); //"mp3"得到后缀后可以自由拼接文件名了，这里就不多做赘述了，其主要原理是将字符串以.为分割，分割成数组，再通过数组pop出栈方法，删除最末尾的值，pop删除后还会将删除的值返回，所以我们就可以直接获取到mp3。
分类：
JavaScript
标签：
下载javascripta
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
全部评论 6
hello world
Google Chrome Windows 7木灵鱼儿
FireFox Windows 10小小毛
Google Chrome Windows 10木灵鱼儿
FireFox Windows 10小小毛
Google Chrome Windows 10木灵鱼儿
FireFox Windows 10