开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

文件下载方式有哪些？

我平时在开发过程中用地比较多的主要有下面这几种
1、在a标签上加href属性
2、js中打开文件路径
3、使用iframe下载
4、动态创建a标签进行下载（angular）
5、动态创建a标签进行下载（js）

1、在a标签上加href属性

这是HTML5的新特性，在后面的4、5方法中也有用到，代码如下：

<a href="要下载文件的路径"  download="要下载文件的名称"></a>

2、js中打开文件路径

代码如下：

window.open('文件路径');<br>
或  window.location.href = '文件路径';

上面说到的两种方法在批量下载时循环不可用，再循环中只执行循环的最后一次操作。为了实现一次下载多个文件，可以使用iframe下载

3、使用iframe下载

思路：动态创建iframe,设置display和height属性，防止影响页面，然后把iframe挂载到dom树上发请求，设置定时器，5分钟后删除iframe。
代码如下：

download(item, url) {
　　const iframe = document.createElement("iframe");
　　iframe.style.display = "none"; // 防止影响页面
　　iframe.style.height = '0px'; // 防止影响页面
　　iframe.src = url+'?downloadUrl='+item.fileUrl+'&fileName='+item.fileName;
　　document.body.appendChild(iframe); // 这一行必须，iframe挂在到dom树上才会发请求
　　// 5分钟之后删除（onload方法对于下载链接不起作用）
　　setTimeout(()=>{
　　　　iframe.remove();
　　}, 5 * 60 * 1000);
}

this.selectFiles.forEach(it => {
　　that.download(it, url);
})

4、动态创建a标签进行下载（angular）

思路：获取文件流，将文件流转为可用的下载地址，通过动态创建a标签，将生成的下载地址赋值给a标签的href属性上，模拟点击事件，实现文件下载，下载后记得删除创建的a标签。
代码如下：

download() {
    let url = `路径`;
    this.http.request('GET',url,{
        responseType: "arraybuffer"
    }).subscribe((val:any)=>{
        let blob = new Blob([val], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
        let objectUrl = URL.createObjectURL(blob);
        let filename = '文件名';
        let aDownload = $("<a><span class='downloadFile'></span></a>").attr("href",objectUrl).attr('download',filename);
        $("body").append(aDownload);
        $(".downloadFile").click();
        aDownload.remove();
    });
}

5、动态创建a标签进行下载

思路：与方法4一样，不过获取文件流生成url后，既可以像上面似的动态创建a标签进行下载，也可以使用打开新窗口的方式进行下载，另外，上传数据时记得加{responseType: 'arraybuffer'}
代码如下：

downloadFile(data,type) {
    // 下载类型 xls
    const contentType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    // 下载类型：csv
    const contentType2 = 'text/csv';
    const blob = new Blob([data], { type: contentType });
    const url = window.URL.createObjectURL(blob);
    // 打开新窗口方式进行下载
    //window.open(url); 
  
    // 以动态创建a标签进行下载
    const a = document.createElement('a');
    let fileName = "下载数据"+new Date().getTime();
    a.href = url;
    a.download = fileName + '.xls';
    a.click();
    window.URL.revokeObjectURL(url);
  }
  -----------------------------------------------------------------------------
  上传的时候加{responseType: 'arraybuffer'}
  this.http.post(`url`,formData, {responseType: 'arraybuffer'})...

以上就是我经常会用到的几个下载方法了，后期碰到其他的，会继续补充，大家有什么其他方法也可以一起交流一下，多多学习~~~