引子
在HTML5没来之前，浏览器想要下载文件，可能有这么几种方式：
- 借助a标签，
<a href="学习资料.xlsx"></a> window.location = ‘学习资料.xlsx‘- 借助浏览器插件，如flash等（没考证过）
除了第三外，前两种方法有个缺点，就是无法知道下载是否完成，因为浏览器没有给出相关的事件。但是，自从有了Blob，fetch， xhr2这些好用的API之后，ajax下载文件(小文件)就变得可行了，核心原因就在于Blob和ArrayBuffter这些API提供给了浏览器操作二进制文件的能力。接下来就开始我的表演
1. fetch方法
fetch优点有很多，比如基于promise，写起来直观易懂，缺点是IE,包括IE11全部不支持。
使用时要注意一点是，fetch请求时默认不会带上cookie，如果你的api是在登录后才能访问，记得手动设置 credentials选项。下面是下载一个文件的代码：
fetch(‘学习资料.xlsx‘, {
method: ‘GET‘,
credentials: "same-origin"// 带上cookie
})
.then(res => res.blob())
.then(blob => {
saveAs(blob) //fileSaver.js中的方法
})从上面可以看出，调用fetch时会返回一个promise，当promise resolve时，会传出一个Response的实例(res)，这个res除了有status， statusText，ok 这几个属性用于获取服务器相应的状态值外，还有几个炫酷的方法，正式这几个方法，使浏览器可以请求的数据类型不再局限于文本，他们是：
res.blob() //返回值是一个promise，promise resolve后会拿到一个blob对象
res.json() //返回值是一个promise，promise resolve后会拿到一个json对象，无需再调用JSON.parse
res.text() //返回值是一个promise，promise resolve后会拿到一个字符串
res.formData() //返回值是一个promise，promise resolve后会拿到一个表单数据对象（formData）所以拿到blob后，接下来就是触发浏览器的下载了，这里调用了一个saveAs函数，它来自FileSaver.js,一个不用请求api也可以触发浏览器下载动作的库，它接受一个blob对象，和一个可选的文件名称参数，就能触发下载动作。
2.xhr2方法
xhr2的兼容性比fetchAPI要好，兼容到IE10，它没有向fetch一样把难用的xhr推翻重做，而是做了一些有用的扩展，比如xhr.responseType，在发起请求前，通过设置这个属性，可以使浏览器对返回的数据进行处理，就像res的那些有用的方法一样。xhr.responseType可以取下列值:
"arraybuffer",
"blob",
"document",
"json",
"text"没错，就是和上面的res的那些方法殊途同归。当请求数据返回时，你可以从xhr.response拿到相应的数据。为什么不是res.responseText呢?很明显这是xhr1时期的，从这个属性只能拿到字符串，是满足不了我们的需求的。
接下来的事情就跟上面一样了，照例贴一下代码:
var xhr = new XMLHttpRequest();
xhr.responseType = ‘blob‘;
xhr.open(‘GET‘, url, true);
xhr.onload = function(){
var res = xhr.response;
if(res){
saveAs(res, filename);
}
}
xhr.send();到这里，你就可以从容掌握文件下载的状态了。最后再啰嗦一句，xhr.onload也是xhr2增加的事件，有了它，再也不想用xhr.onReadyStateChange了。其他新增的事件还有‘onprocess‘, ‘onerror‘, ‘onabort‘, ‘onloadstart‘，‘onloadend‘, ‘ontimeout‘。（完）
原文地址：https://www.cnblogs.com/imgss/p/9265903.html