后端接口返回文件流，前端将其导出下载在浏览器

1.先定义一下接口 注意一定要配置responseType和headers

export function exportList (params) {
  return axios({
    url: process.env.VUE_APP_API_BASE_EVAL_URL + '/prorecord/downloadExcel',
    method: 'post',
    params,
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json',
      'accessToken': sessionStorage.getItem(ACCESS_TOKEN)
    }
  })
}

2.写一个方法

export function downloadFileTools (blob, name) {
  const readerUrl = window.URL.createObjectURL(blob)
  const tempLink = document.createElement('a')
  tempLink.download = name
  tempLink.href = readerUrl
  tempLink.click()
  return Promise.resolve()
}

3.在需要导入的页面中引用,把导出方法绑定到按钮上即可

import { exportList } from '@/api/evalTaskManage.js'
import { downloadFileTools } from '@/utils/fileTool'

...
methods:{
exportList () {
      exportList({ taskId: this.taskId }).then(res => {
        let fileNameEncode = ''
        let error = ''
        // 如果报错，拿到报错信息
        if (res.headers['error']) {
          error = res.headers['error']
          const errorInfo = decodeURIComponent(error)
          this.$message.error(errorInfo)
        } else {
          // 切割出文件名
          if (res.headers['content-disposition']) {
            fileNameEncode = res.headers['content-disposition'].split('filename=')[1]
          // 解码
            const fileName = decodeURIComponent(fileNameEncode)
            downloadFileTools(new Blob([res.data]), fileName)
          }
        }
      })
      .catch(error => {
        console.log('🚀 ~ file: tree.vue:84 ~ exportList ~ error', error)
      })
    },
  }

有一个注意事项：downloadFileTools方法的第一个参数必须是blob类型的，否则下载下来的文件无法打开！！！