思路:

• 导出的接口返回的是二进制流

• axios配置responseType为blob接收二进制流文件为Blob格式

• 安装file-saver包，实现下载Blob文件  yarn add file-saver

导出的接口的数据类型

export function xxx() {
  return request({
    url: 'xxx',
    // 改变接收数据的类型
    responseType: 'blob' // 使用blob接收二进制文件流
  })
}

改造响应拦截器

判断是不是blob类型，如果是直接返回数据，不再进行解构

// 响应拦截器
service.interceptors.response.use((response) => {
  // axios默认包裹了data
  // 判断是不是Blob
  if (response.data instanceof Blob) return response.data // 返回了Blob对象
  const { data, message, success } = response.data // 默认json格式
  if (success) {
    return data
  } else {
    Message({ type: 'error', message })
    return Promise.reject(new Error(message))
  }
},

安装file-saver

$ npm i file-saver
$ yarn add file-saver

点击按钮调用接口

使用file-saver将blob转化成文件下载

<el-button size="mini" @click="exportEmployee">excel导出</el-button>
 import FileSaver from 'file-saver'
 import { xxxx} from '@/api/employee'
  async  xxxxx() {
      const result = await xxxx() // 导出
      // console.log(result) // 使用一个npm包 直接将blob文件下载到本地 file-saver
      // FileSaver.saveAs(blob对象,文件名称)
      FileSaver.saveAs(result, 'xxx表.xlsx') // 下载文件
 }