vue通用下载方法

放在request.js中

import { tansParams, blobValidate } from '@/framework/utils/index'
import { MessageBox, Message, Loading } from 'element-ui'
import errorCode from '@/framework/utils/errorCode'
let downloadLoadingInstance
// 通用下载方法
export function download(url, params, filename) {
  downloadLoadingInstance = Loading.service({
    text: '正在下载数据，请稍候',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  return service
    .post(url, params, {
      transformRequest: [
        (params) => {
          return tansParams(params)
        }
      ],
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      responseType: 'blob'
    })
    .then(async(data) => {
      const isLogin = await blobValidate(data)
      if (isLogin) {
        const blob = new Blob([data.data])
        saveAs(blob, filename)
      } else {
        const resText = await data.text()
        const rspObj = JSON.parse(resText)
        const errMsg =
          errorCode[rspObj.code] || rspObj.msg || errorCode['default']
        Message.error(errMsg)
      }
      downloadLoadingInstance.close()
    })
    .catch((r) => {
      console.error(r)
      Message.error('下载文件出现错误，请联系管理员！')
      downloadLoadingInstance.close()
    })
}

main.js中引用

import { download } from '@/utils/request'
Vue.prototype.download = download

使用通用方法

 /** 导出按钮操作 */
    handleExport () {
      this.download('courses/duration/export', {
        ...this.queryParams
      }, `duration_${new Date().getTime()}.xlsx`)
    },

遇到的坑

开始写的data会出现下载之后打不开的情况