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

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

  1. hello world
    hello world
    Google Chrome Windows 7
    差评,说跨域了
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @hello world那说明功能没问题,跨域是后端设置
  2. 小小毛
    小小毛
    Google Chrome Windows 10
    前端爱好者吗
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @小小毛咋了(`・ω・´)
      1. 小小毛
        小小毛
        Google Chrome Windows 10
        @木灵鱼儿妹子加个微信吗(〜 ̄△ ̄)〜
        1. 木灵鱼儿
          木灵鱼儿
          FireFox Windows 10
          @小小毛老色批在世?

目录