前端解析文件流

https://www.cnblogs.com/hjbky/p/11506625.html

前言
项目中经常会遇到需要导出列表内容，或者下载文件之类的需求。结合各种情况，我总结了前端最常用的三种方法来接受后端传过来的文件流并下载，针对不同的情况可以使用不同的方法。

方法一
使用场景
针对后端的get请求

具体实现
直接用个标签来接受后端的文件流

<a href="后端文件下载接口地址" >下载文件</a>

方法二
使用场景
针对后端的post请求
利用原生的XMLHttpRequest方法实现

具体实现

function request () {
    const req = new XMLHttpRequest();
    req.open('POST', '<接口地址>', true);
    req.responseType = 'blob';
    req.setRequestHeader('Content-Type', 'application/json');
    req.onload = function() {
      const data = req.response;
      const a = document.createElement('a');
      const blob = new Blob([data]);
      const blobUrl = window.URL.createObjectURL(blob);
      download(blobUrl) ;
    };
    req.send('<请求参数：json字符串>');
  };
 
function download(blobUrl) {
  const a = document.createElement('a');
  a.style.display = 'none';
  a.download = '<文件名>';
  a.href = blobUrl;
  a.click();
  document.body.removeChild(a);
}
 
request();

方法三
使用场景
针对后端的post请求
利用原生的fetch方法实现

具体实现

function request() {
  fetch('<接口地址>', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: '<请求参数：json字符串>',
  })
    .then(res => res.blob())
    .then(data => {
      let blobUrl = window.URL.createObjectURL(data);
      download(blobUrl);
    });
}
 
function download(blobUrl) {
  const a = document.createElement('a');
  a.style.display = 'none';
  a.download = '<文件名>';
  a.href = blobUrl;
  a.click();
  document.body.removeChild(a);
}
 
request();

总结
如果后端提供的下载接口是get类型，可以直接使用方法一，简单又便捷；当然如果想使用方法二、三也是可以的，不过感觉有点舍近求远了。
如果后端提供的下载接口是post类型，就必须要用方法二或者方法三了。
方法二和方法三怎么取舍？
当你的项目里的接口请求全是基于XMLHttpRequest实现的，这时方法二就更加适合，只要基于你原来项目中的接口请求工具类加以扩展就行了。
当你的项目里的接口请求全是基于fetch实现的，这时方法三就更加适合，比如我现在的做的一个项目就是基于ant design pro的后台管理系统，它里面的请求类就是基于fetch的，所以我就直接用的方法三，只要在它的request.js文件中稍作修改就行。
我这里讨论的是两种原生的请求方式，如果你项目中引用了第三方请求包来发送请求，比如axios之类的，那就要另当别论了。

this.$axios.post("/api/xxx/xxx/xxx",this.$qs.stringify({range:0,}),{responseType:'blob'}).then(msg=>{
                console.log(msg.data) //打印出来是blob对象，已经不是乱码了
                let url = window.URL.createObjectURL(msg.data); //表示一个指定的file对象或Blob对象
                console.log(url,"看一下这是啥")
                let a = document.createElement("a"); 
                document.body.appendChild(a);
                let fileName=msg.headers["content-disposition"].split(";")[1].split("=")[1];  //filename名称截取
                a.href = url;
                a.download = fileName; //命名下载名称
                a.click(); //点击触发下载  
                window.URL.revokeObjectURL(url);  //下载完成进行释放
        })

特别注意：
在和后台交互的时候，如果后台返回给我们的是二进制流数据，我们就要在发送的时候加上{responseType:‘blob’}这行代码，这样返回给我们的就不是乱码了。

ajax实战：（ajax异步下载文件）请求二进制流进行处理
使用blob类型进行接收

<button type="button"  onclick="download()">导出</button>

function download() {

   var url = 'download/?filename=aaa.txt';

   var xhr = new XMLHttpRequest();

   xhr.open('GET', url, true);        // 也可以使用POST方式，根据接口

   xhr.responseType = "blob";    // 返回类型blob

   // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑

   xhr.onload = function () {

   // 请求完成

   if (this.status === 200) {

       // 返回200

       var blob = this.response;

       var reader = new FileReader();

       reader.readAsDataURL(blob);    // 转换为base64，可以直接放入a表情href

       reader.onload = function (e) {

           // 转换完成，创建一个a标签用于下载

           var a = document.createElement('a');

           a.download = 'data.xlsx';

           a.href = e.target.result;

           $("body").append(a);    // 修复firefox中无法触发click

           a.click();

           $(a).remove();

       }

   }

   };

   // 发送ajax请求

   xhr.send()

}