Vue 下载文件 封装

const baseUrl = process.env.VUE_APP_BASE_API
// 导出公用 多页面公用文件未提出 勿删
export function commonExportPost(url, data, fileName) {
  // 创建axios实例
  const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: baseUrl,
    // 超时
    timeout: 180000
  })
  service.interceptors.request.use((config) => {
    config.data = securityCodeNew.interceptData(config.url, config.data)

    return config
  })

  return service({
    url: url,
    method: 'post',
    data: data,
    responseType: 'blob',
    headers: {
      Authorization: localStorage.getItem('Admin-Token') ? 'Bearer ' + localStorage.getItem('Admin-Token') : ''
    }
  })
    .then((info) => {
      const data = info.data
      // 有可能下载失败，比如返回{code: 0},但设置了responseType: 'blob'，axios会把data强制转为blob，导致下载undefined.excel（后缀取决于文件类型，这里只是举例）
      // 解决：将已转为blob类型的data转回json格式，判断是否下载成功
      const reader = new FileReader()
      // 如果JSON.parse(this.result)不报错，说明this.result是json字符串，则可以推测是下载报错情况下返回的对象，类似于{code: 0}
      // 如果JSON.parse(this.result)报错，说明是下载成功，返回的二进制流，则进入catch进行后续处理
      reader.onload = function () {
        try {
          const resData = JSON.parse(this.result) // this.result为FileReader获取blob数据转换为json后的数据，即后台返回的原始数据
          // 如果执行到这里，说明下载报错了，进行后续处理
          console.log('错误')
          Message({
            message: resData.msg || '失败，请联系系统管理员',
            type: 'error'
          })
        } catch {
          if ('download' in document.createElement('a')) {
            //非IE下载
            let url = window.URL.createObjectURL(info.data)
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('id', 'downloadLink')
            link.setAttribute('download', fileName)
            document.body.appendChild(link)
            link.click()
            // 删除添加的a链接
            let objLink = document.getElementById('downloadLink')
            document.body.removeChild(objLink)
            // 释放内存
            window.URL.revokeObjectURL(url)
          } else {
            console.log('ie下载')
            //IE10+下载
            window.navigator.msSaveBlob(info.data, fileName)
          }
        }
      }
      reader.readAsText(data)
    })
    .catch((error) => {
      console.log(error)
    })
}

// get方式
export function commonExportGet(fileName, url) {
  return new Promise((resolve) => {
    axios({
      url: baseUrl + url,
      method: 'GET',
      headers: {
        Authorization: localStorage.getItem('Admin-Token') ? 'Bearer ' + localStorage.getItem('Admin-Token') : ''
      },
      responseType: 'blob'
    }).then((response) => {
      if (!response.data) {
        Message({
          message: '失败，请联系系统管理员',
          type: 'error'
        })
        return
      }
      const blob = new Blob([response.data])
      if (window.navigator.msSaveOrOpenBlob) {
        // 如果是IE浏览器
        window.navigator.msSaveOrOpenBlob(blob, fileName)
      } else {
        // 非IE浏览器
        saveAs(blob, fileName)
      }
      resolve()
    })
  })
}