js下载文件

最近一直在做上传，下载，预览等相关功能

今天记录一下js实现下载文件的方式：

方式一：a 链接下载：模拟a链接的点击，把后端返回的下载地址设置给a链接的href属性

1.  
   let a = document.createElement('a'); //创建一个a标签用来跳转
2.  
   a.href = myurl; //myurl 是后端返回的下载地址
3.  
   // a.target = '_blank';
4.  
   a.download = "xixi.zip"; //设置下载文件的文件名和文件格式
5.  
   document.body.appendChild(a); //将标签DOM，放置页面
6.  
   a.click();
7.  
   window.URL.revokeObjectURL(myurl); //释放 url 对象内存
8.  
   document.body.removeChild(a);

方式二，文件流下载：

1.  
   request({
2.  
       url: `/fpUpload/download?id=${downloadIdStr.substring(0,downloadIdStr.length-1)}&fileType=${this.downloadFileType}`,
3.  
       responseType: 'blob', //设置响应格式
4.  
       method: "get",
5.  
       }).then(res => {
6.  
       if(btnType == 1){
7.  
       this.tbButtonDisable = false;
8.  
       }else if(btnType == 2){
9.  
       this.ecButtonDisable = false;
10.  
        }else if(btnType == 3){
11.  
        this.cqButtonDisable = false;
12.  
        }
13.  
       
14.  
        downMsg.close();
15.  
        console.log(res, "--res");
16.  
       
17.  
        let blob = new Blob([res.data],{
18.  
        type:"application/zip"
19.  
        })
20.  
        let myurl = window.URL.createObjectURL(blob);
21.  
        console.log(myurl)
22.  
        let a = document.createElement('a'); //创建一个a标签用来跳转
23.  
        a.href = myurl;
24.  
        // a.target = '_blank';
25.  
        a.download = decodeURI(res.headers['content-disposition'].split('filename=')[1]) ".zip"; //设置下载文件的文件名和文件格式
26.  
        document.body.appendChild(a); //将标签DOM，放置页面
27.  
        a.click();
28.  
        window.URL.revokeObjectURL(myurl); //释放 url 对象内存
29.  
        document.body.removeChild(a);
30.  
       
31.  
       
32.  
       
33.  
       
34.  
        }).catch(err => {
35.  
        // console.log(err)
36.  
        })

重要部分圈起来：

遇到的问题：

我现在拿到后端给我的流，按照上面的代码执行，他没下载直接在浏览器打开了那个url地址了

因为我这边下载的文件都是zip文件，所以指定 type application/zip

download ="文件名".zip

下载文件不用写a.target属性，去掉

改了以后就可以下载了，然后再说一下，文件名的获取方式：

参考文章：

https://www.cnblogs.com/jdWu-d/p/15513478.html

a.download = decodeURI(res.headers['content-disposition'].split('filename=')[1]) ".zip"; 

注意拿到文件名后是一堆乱码，需要进行 decodeURI 转码操作

这块参考文章：

https://developer.aliyun.com/article/1086803

获取文件名可能遇到的问题：

network可以看到 Content-Disposition 值，但是控制台输出undefined,打印是无法获取的，是因为后端缺了一个步骤

搞定啦！！！