前端字节流下载文件

在之前的项目中处理下载一般都是后端直接给个链接，放a标签上写死就行了。再麻烦一点的顶多就是通过请求获取到链接再加到a标签上。这两种方式对于我们前端来说都是见的比较多的情况。

最近在做react项目时有个需求是可以点击同时下载多个文件，后端的童鞋告诉我，他会直接返回字节流请求后直接就能自动下载。之前还真没处理过这种下载方式，所以天真的相信了。我通过axios请求成功后发现并没有浏览器并没有直接下载文件，显然是需要前端做特殊处理的。

查阅了一番资料，最终解决了这个问题，怕自己忘了记录到简书上：

function downLoadFiles(name, data) {
        var urlObject = window.URL;  //window对象的URL对象是专门用来将blob或者file读取成一个url的。
        var export_blob = new Blob([data]); //代表二进制类型的大对象,就是Blob对象是二进制数据
        var save_link = document.createElement('a');//创建a标签
        save_link.href = urlObject.createObjectURL(export_blob); //通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL
        //download是 HTML5 中<a>标签新增的一个属性，此属性会强制触发下载操作，指示浏览器下载 URL 而不是导航到它，并提示用户将其保存为本地文件
        save_link.download = name;
        save_link.click();//触发a标签单击
    }

name可以传入我们下载文件的名字，
data后台传给我们的字节流数据
没有测试浏览器的兼容性感兴趣的童鞋可以自己测一测。
当然这只是我们完成了下载的第一步，第二步我们需要在请求方法中添加响应类型responseType:blob,这个也是必须添加的不然还是不能正常下载。

xhr.responseType="blob"; //字节流
axios.get("url", {
    params: {
      //传入的参数
    },
    responseType: "blob"
  });

以上我们便完成了字节流的下载处理。