首先在我们request.js里引入axios并配置好拦截器等常规方法,通用下载方法以下

 

// 通用下载方法
export function download(url, params, filename) {
  downloadLoadingInstance = Loading.service({ text: "正在下载数据,请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
  return axios.post(url,params, {
    //transformRequest: [(params) => { return tansParams(params) }],
    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
    responseType: 'blob'
  }).then(async (res) => {
    console.log(res);
const { data, headers } = res
console.log(headers)
const fileName = '文件名.xlsx' //headers['content-disposition'].replace(/\w+;filename=(.*)/, '$1')
console.log(fileName,'文件名');
// 此处当返回json文件时需要先对data进行JSON.stringify处理,其他类型文件不用做处理
 //const blob = new Blob([JSON.stringify(res)])
 const blob = new Blob([data], {type: headers['content-type']})
 console.log(blob)
 let dom = document.createElement('a')
 let url = window.URL.createObjectURL(blob)
dom.href = url
 dom.download = decodeURI(fileName)
 dom.style.display = 'none'
 document.body.appendChild(dom)
 dom.click()
 dom.parentNode.removeChild(dom)
 window.URL.revokeObjectURL(url)
 downloadLoadingInstance.close();
  }).catch((r) => {
    console.error(r)
    Message.error('下载文件出现错误,请联系管理员!')
    downloadLoadingInstance.close();
  })
}

在request.js中配置好了怎么在组件里使用呢?

首先在对应的组件中引入

import {download} from '@/api/request'

然后调用下载方法

 download(process.env.VUE_APP_BASE_API+'/ssxn/condition/exportExcel',{
       //参数
      name:this.queryParams.name,
      type:this.queryParams.type,
      phone:this.queryParams.phone
    },'xxxx')

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐