xhr get获取文件流下载文件_下载文件需要带token验证的文件流的解决办法

项目中有时需要下载文件 比如 pdf 或者 Excel时，一般是直接点击一个连接就可以直接下载，这一般是文件流的下载方式。但有个缺点就是只要拿到这个文件流地址，在什么地方都可以直接下载，安全性不好，此时就需要带上token进行验证，通过一个请求带上其token，然后把返回值进行文件流下载即可。

前端在处理这种情况时，经过不断的试验，总结了一下，可以使用blob对象来接收文件流。

首先将请求配置中的responseType（服务器相应的数据类型）设置为 'blob'。

{
  responseType: 'blob'
}

方法一：

axios.get('your_api').then(res=>{
   let blob = new Blob([res],{
       type:'application/vnd.ms-excel'      //将会被放入到blob中的数组内容的MIME类型 
   });
   let objectUrl = URL.createObjectURL(blob);  //生成一个url
   window.location.href = objectUrl;   // 然后直接通过连接下载文件
})

方法二：

axios.get('your_api').then(res=>{
   const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
   const url = window.URL.createObjectURL(blob);
   const a = document.createElement('a');
   a.href = url;
   a.download = 'your_name.pdf';
   a.click();
   window.URL.revokeObjectURL(url);
})

方法二有个好处是可以设置下载文件的名称，当然方法一也可以，就是也使用a链接自点击时间就好了。两个方法大同小异，可以随心选择~

注： URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document绑定。这个新的URL 对象表示指定的 File对象或 Blob对象。
在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL()方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。