vue 下载excel文件流

1.设置请求头 responseType: 'blob'

后端接口

//导出
export function downloadCustomMechanismInfo(data){
    return request({
        url: '下载的接口地址',
        method: 'post',
        data,
        responseType: 'blob' 
    })
}

2.导出excel文件

import { Loading } from 'element-ui'
//方法一
export default {
    methods: {
        exportAllList(){
      const loadingInstance = Loading.service({
        fullscreen: true,
        background: '#fff0'
      })
      downloadCustomMechanismInfo({}).then(res=>{
        loadingInstance.close()
        const content = res
        const blob = new Blob([content])//处理返回
        const fileName = '自定义主机构信息.xls'
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },
    }
}




//方法二
downloadBtn() {
      if (this.selectList.length === 0) {
        this.$notify({
          title: '提示',
          message: '请先选中需要下载的数据',
          type: 'warning'
        })
        return false
      }
      const url =
        process.env.VUE_APP_BASE_API +
        '/bzcounterparty/exportExcel?ids=' +this.downloadData //下载数据需要传的数据
      window.open(url)
    },


//方法三

3.请求拦截中添加responseType类型

if (config.url.indexOf('exportPledgeConcentration') != -1 || config.url.indexOf('exportProductConcentration') != -1) {
            config['responseType'] = 'blob'
        }