前端文件下载方式探讨

开发过程中遇到一个问题，就是文件下载问题，通过请求后端的接口把文件下载到本地。
一般有两种方式

一、window.open

window.open(URL,name,features,replace)
url: 代表url
name: 新窗口的名字
features: 新窗口的特性
replace: 是否替换当前浏览器的历史记录

二、window.location.href

window.location用来获取网页的URL，它是一个对象，包含属性有：
hash：从井号 (#) 开始的 URL
host： 主机名和当前 URL 的端口号
hostname： 当前 URL 的主机名
href：完整的 URL
pathname： 当前 URL 的路径部分
port ：当前 URL 的端口号
protocol： 当前 URL 的协议
search ：从问号 (?) 开始的 URL

但是上面两种方式，不能很好的解决一个问题就是，只告诉你下载了，没告诉你下载成功不成功，下载进度如何，如果想在下载的时候，加一个loading的效果，该怎么实现？

三、Blob

---

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File就继承了Blob的功能，所以你可以像操作blob一样操作file。

---

3.1 Blob的使用方式

let blob = new Blob(array, options)
/**
   array: Blob的第一个参数是一个数组，数组每一项的内容可以是：
	   DOMString、ArrayArrayBuffer、ArrayBufferView,、Blob。
   options: 代表Blob对象的类型，
   options：可选项，字典格式类型，可以指定如下两个属性：
			type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。
			endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 
			它是以下两个值中的一个： "native"，表示行结束符会被更改为适合宿主操作系统
			文件系统的换行符； "transparent"，表示会保持blob中保存的结束符不变。
**/
let blob = new Blob (['str', 123])

3.2 slice

可以通过slice操作blob

blob.slice(start, end) // 返回start到end之间的数据，不包括end

3.3 使用blob进行下载文件

• 发起ajax请求的时候，需要你将后台返回的数据转化为Blob
• 对返回的Blob数据，进行下载

Axios.get(url, { responseType: 'blob',}).then((response) => {
     let blob = new Blob([response.data], {'type': 'application/octet-stream;charset=UTF-8'})
     let url = window.URL.createObjectURL(blob);
     let link = document.createElement('a');
     link.href = url;
     link.setAttribute('download', fileName);   // 给a标签加一个download属性
     link.click();                             //模拟点击
     window.URL.revokeObjectURL(link.href);                            

如果想实现进度条，需要和后端配合，流程是这样子的

• 每次请求，后端除了返回数据还要返回数据的总和
• 根据当前下载数据的大小来判断，进度
• 不停地请求后台数据，循环调用自身

参考

Blob