vue下载文件（excel）_vue下载exe的type

vue中下载后端返回的文件流或者网址

首先调用接口的方法
我这个是把接口地址单独拿出来
这是定义在公共方法中，在main.js就引入的js文件

export function downLoad(url){//post的时候参数就是（url,data）第二个是请求体
    return newPromise((resolve,reject)=>{
       axios({
         method:'get',//post(根据规定的方法get或者post)
         url:domain.Base_Mzt_URL+url,//domain.Base_Mzt_URL自己规定的根据网址不同部署不同的环境
         responseType:'blob',
         headers:{'Admin-Token':store.getters.token}//从store中获取的
       })
         .then(res=>{
            resolve(res)
         })
         .catch(err=>{
            reject(err)
         })
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这是template的代码

<el-button type="primary" size="mini" @click="goDown">下载</el-button>
1

这是js的代码

goDown(){
let laodingIntance =Loading.service({text:"账单下载中..."}) //import { Loading } from "element-ui"
downLoad(`${this.API.exportAgentBill}?billId=${this.id}`)//post:(this.API.exportAgentBill,{id:1})
   .then((res)=>{
   //返回的是文件流所以用window生成一个网站，如果返回的网址那么就直接用res的结果进行创建a标签点击
     let url=window.URL.createObjectURL(new.Blob([res.data]))
     //生成a标签
     let link=document.createElement("a")
     link.style.dispaly='none'
     link.href=url
     loadingInstance.close()
     link.download='自定义命名下载的文件'
     document.body.appendChild(link)
     link.click()
   })
   .catch((err) => {
          loadingInstance.close();
          this.$message.warning("下载失败!");
        });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20