VUE+axios返回文件流下载

下载文件通常使用同步操作

当在vue + axios环境下，尤其是在vue路由的环境下，怎样实现异步 也能下载后端返回的二进制文件

axios完整代码：

/*下载excel*/
function downExcelAction(url,data) {
  return axios({
    url: url,
    method: 'post',
    data: data,
    transformRequest: [function(data) {
      let ret = ''
      for(let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    responseType: 'blob'
  }).then(res=>{
    var blob = new Blob([res], { type: 'application/vnd.ms-excel    application/x-excel;charset=utf-8' });
    var downloadElement = document.createElement('a');
    var href = window.URL.createObjectURL(blob);
    downloadElement.href = href;
    downloadElement.download = data.bigTile+'.xls';
    document.body.appendChild(downloadElement);
    downloadElement.click();
    document.body.removeChild(downloadElement);
    window.URL.revokeObjectURL(href);
  })
}

代码分析：
1、写一个正常的axios的请求,包含请求url,请求excel下载的data参数，但是我们请求的接口，返回的是一个二进制文件，所以还需要做一些修改

function downExcelAction(url,data) {
  return axios({
    url: url,
    method: 'post',
    data: data})
    }

2、需要修改默认的Content-Type

function downExcelAction(url,data) {
  return axios({
    url: url,
    method: 'post',
    data: data
    headers: { //需要修改为表单提交的格式，默认为application/json
      'Content-Type': 'application/x-www-form-urlencoded'
    }
    })
}

3、请求发送前重新编辑请求数据，使用transformRequest属性，这一块理解的不是很透彻，大概意思是在将请求数据封装成&格式，有懂的老哥可以留言，互相学习

function downExcelAction(url,data) {
  return axios({
    url: url,
    method: 'post',
    data: data
    headers: { //需要修改为表单提交的格式，默认为application/json
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    transformRequest: [function(data) {
      let ret = ''
      for(let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    })
   }

4、设置返回参数类型，这里后台返回的是二进制文本格式，对应axios就是blob

function downExcelAction(url,data) {
  return axios({
    url: url,
    method: 'post',
    data: data
    headers: { //需要修改为表单提交的格式，默认为application/json
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    transformRequest: [function(data) {
      let ret = ''
      for(let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    responseType: 'blob'
    })
  }

5、写一个回调，处理二进制文本，进行下载，处理方式就是创建一个a标签dom，将二进制文本放进一个bolb文本对象，通过href的方式去实现下载

function downExcelAction(url,data) {
  return axios({
    url: url,
    method: 'post',
    data: data
    headers: { //需要修改为表单提交的格式，默认为application/json
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    transformRequest: [function(data) {
      let ret = ''
      for(let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    responseType: 'blob'
    }).then(res=>{  //回调处理
    var blob = new Blob([res], { type: 'application/vnd.ms-excel    application/x-excel;charset=utf-8' });
    var downloadElement = document.createElement('a');
    var href = window.URL.createObjectURL(blob);
    downloadElement.href = href;
    downloadElement.download = data.bigTile+'.xls'; //博主下载的是excel,根据个人需求改变后缀
    document.body.appendChild(downloadElement);
    downloadElement.click();
    document.body.removeChild(downloadElement);
    window.URL.revokeObjectURL(href);
  })
}

欢迎纠错~~
啾咪