后端接口返回文件流，前端处理并下载

如图：前端请求导出接口，后端返回的像是一堆乱码，其实这是文件流，需要前端处理一下才能下载

写一个公共的方法，在utils文件夹下新建一个validate.js文件

import { Message } from 'element-ui'
import service from '@/utils/request' //service是创建的axios实例

// 下载文件流
export function downRequest(url, params, fileName) {
  return service.post(url, params, {
  // 因为是post请求，处理传参格式为formdata
    transformRequest: [(params) => {
      let result = ''
      Object.keys(params).forEach((key) => {
        if (!Object.is(params[key], undefined) && !Object.is(params[key], null)) {
          result += encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) + '&'
        }
      })
      return result
    }],
    responseType: 'blob' //非常重要
  }).then((res) => {
    // console.log('res', res) 
    //注意这里有可能是res.data, 根据你们的接口返回来看，最好打印一下看看，如果没有拿到返回的数据，导出的表格打开会出现undefined
    const blob = new Blob([res]) // 转化为blob对象
    const filename = fileName || 'filename.xlsx' // 判断是否使用默认文件名
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      window.navigator.msSaveBlob(blob, filename)
    } else {
      var blobURL = window.URL.createObjectURL(blob) // 将blob对象转为一个URL
      var tempLink = document.createElement('a') // 创建一个a标签
      tempLink.setAttribute('download', fileName + '.xlsx') // 下载的文件名以及文件格式
      tempLink.style.display = 'none'
      tempLink.href = blobURL
      tempLink.setAttribute('download', filename) // 给a标签添加下载属性
      if (typeof tempLink.download === 'undefined') {
        tempLink.setAttribute('target', '_blank')
      }
      document.body.appendChild(tempLink) // 将a标签添加到body当中
      tempLink.click() // 启动下载
      document.body.removeChild(tempLink) // 下载完毕删除a标签
      window.URL.revokeObjectURL(blobURL)
      Message.success('导出成功')
    }
  }).catch((r) => {
    console.error(r)
    Message.error('下载失败')
  })
}

在页面调用

import { downRequest } from '@/utils/validate'


downRequest('url接口', { id: id }, '数据导出.xlsx')
         //('url接口', {'后端需要的参数'}, '自定义格名称.xlsx')