• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

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

580 6

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

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

0
  • 本文分类:JavaScript
  • 本文标签:下载javascripta
  • 流行热度:已超过 580 人围观了本文
  • 最后更新:2021年02月15日 - 20时10分17秒
  • 发布日期:2021年02月15日 - 17时27分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码