浅谈一下关于a链接通过下载链接下载文件的方法

群友今天让我帮忙改一下他站点下载音频文件的方法，为此有了这篇心得。

首先当我通过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。