在开发中，下载功能是我们经常遇到的，一般下载有两种：
1、后端直接返回文件地址，前端使用a标签下载
2、后端返回文件流
第1种很简单，今天我们来试下下载文件流，首先看下后端返回的数据截图：

一看到这里，我去，有点懵啊，这啥玩意，这就是所谓的文件流，想要下载，也是可以的，操作步骤如下：
直接上代码啊，有任何问题可以私聊联系，一起学习~

此代码以vue+elementUI为例，react中同理

页面代码：

<el-button type="primary" :loading="loading" @click="dowload">
  确定
</el-button>

dowload() {
      this.loading = true
      // 请求数据参数
      const params = {
          key: value,
          ...
      }
      export('https://www.chao99.top/test', params, test-file-name.txt).then(() => {
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

axios代码：

 export (url, data = {}, fileName) {
    return new Promise((resolve, reject) => {
      axios({
        method: 'post',
        url,
        data,
        responseType: 'blob'
      }).catch((error) => {
        const reader = new FileReader()
        reader.readAsText(error.data)
        reader.onload = event => {
          try {
            const json = JSON.parse(event.target.result)
            if (json) {
                // 这里是json信息哦
                // 可以做一些非文件情况下的逻辑处理
                console.log('这里是json信息哦', json)
                reject()
            }
          } catch (err) {
                // 文件流在error中，根据具体后端返回做处理
                dowloadFileStream(error.data, fileName)
                // 获取文件流成功之后，回调回去标识
                // 可用于关闭loading
                resolve(1) 
          }
        }
      })
    })
  }

下载文件流代码：

/**
 * 下载文件流
 * blob：文件流
 * fileName：文件名称
 * author：www.chao99.top
 */
export function dowloadFileStream (blob, fileName) {
  const reader = new FileReader()
  reader.readAsDataURL(blob)
  reader.onload = (e) => {
    const a = document.createElement('a')
    a.download = fileName
    a.href = e.target.result
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
  }
}

感谢阅读，有任何问题，可以一起探讨呦~