前端将后端返回的文件流转为excel并下载

在日常开发中，我们可能会遇到导出excel的情况，而后端此时给我们返回的是一个文件流，需要前端将文件流转为url地址进行下载。

可以将这个方法封装成一个工具类，方便其他地方调用，我这里放到了utils.js里面

import axios from 'axios'
import Vue form 'vue'

/**
 * 根据后端返回的文件流转为excel导出
 * @param {Object} data
 */
export function exportExcelMethod(data) {
  axios({
    method: data.method,
    url: `${data.url}${data.params ? '?' + data.params : ''}`,
    responseType: 'blob',
    headers: {
      token: data.token
    },
    timeout: 8000,
    data: data.data
  })
    .then((res) => {
      const link = document.createElement('a')
      const blob = new Blob([res.data], {
        type: 'application/vnd.ms-excel'
      })
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)

      //判断是否IE浏览器
      function isIE() {
        if (!!window.ActiveXObject || 'ActiveXObject' in window) {
          return true
        } else {
          return false
        }
      }
      if (data.fileName) {
        link.download = data.fileName //下载的文件名
      } else {
        const fileName = decodeURI(
          res.headers['content-disposition'].split('=')[1]
        )
        link.download = fileName
      }
      if (isIE()) {
        // 兼容ie
        window.navigator.msSaveOrOpenBlob(blob, link.download)
      } else {
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }
      Vue.prototype.$message.success('导出成功！')
    })
    .catch((error) => {
      Vue.prototype.$message.error('参数错误！')
    })
}

<el-button type="primary" plain size="small" @click="exportLog">导出</el-button>

import { exportExcelMethod } from '@/utils'

exportLog() {
    const url = this.baseUrl
    const data = this.data
    const myObj = {
      method: 'post',
      url: url,
      fileName: 'xxx日志',
      token: this.token,
      data: { data }
    }
    exportExcelMethod(myObj)
  }