后端返回文件流，前端怎么导出、下载

        工作中肯定有很多导出excel、下载文件这种功能。一般都是后端做好，我们去请求对应的接口就行了，前端还需要做一些处理就可以实现导出、下载功能了。具体怎么操作呢，我们来看看！

第一步：在请求的时候做些一些处理

        我们在请求的时候 需要定义responseType【响应类型】为blob类型，如果是post请求还需要在请求头里携带Content-Type: 'multipart/form-data'

  // 在请求的时候做一些处理
  // get请求
  markMownLoad = (id) => axios('get',`URLxxxxxx?fileId=${id}`,{
    responseType: 'blob',
    headers:{
      'Content-Type': 'multipart/form-data'
    }
  })
  // post请求
  markMownLoads = (id) => axios('post',`URLxxxxxx?fileId=${id}`,{
    responseType: 'blob',
    headers:{
      'Content-Type': 'multipart/form-data'
    }
  })

第二步：向后端发请求

在请求之前，我们先封装一个解码下载的一个方法，方便我们请求成功后调用

  function downLoadXls (res) {
    const fileNames = res.headers['content-disposition']
    if(fileNames) {
      //解码
      const fileName = decodeURIComponent(fileNames.match(/=(.*)$/)[1])
      // 处理返回的文件流
      const content =res.data
      const blob = new Blob([content],{
        type: "application/octet-stream; charset=utf-8"
      });
      if('download' in document.createElement('a')) {
        //非IE下载
        const a = document.createElement('a') //创建一个a标签
        a.download = fileName //指定文件名称
        a.style.display = 'none' //页面隐藏
        a.href = URL.createObjectURL(blob) // href用于下载地址
        document.body.appendChild(a) //插到页面上
        a.click() //通过点击触发
        URL.revokeObjectURL(a.href) //释放URL 对象
        document.body.removeChild(a) //删掉a标签
      }else{
        //IE10 + 下载
        navigator.msSaveBlob(blob,fileName)
      }
    }
  }

这个时候发请求就可以了

 // 发请求          把后端返回的传过去解码，然后实现导出、下载
  markMownLoads(参数).then(res => downLoadXls(res))

咱们来看一下后端返回的数据时什么样子的