<template> <el-progress :percentage="percentage"></el-progress> <h1>{title}</h1> <el-button :disabled="isDisabled" @click="getProgress">下载文件</el-button> </template> <script> export default { data(){ return { title:"请点击按钮进行下载。", percentage:0, //进度条的占比 isDisabled:false, //默认可以点击 } }, methods: { getProgress(){ //进度条恢复为 0 this.percentage= 0; //按钮置灰 不可点击 this.isDisabled= true; //发起请求 this.$axios({ //下载文件的远端地址。 url:"https://文件地址.html", //请求方式 get post。 method:"get", //设置返回数据类型为base64的数据,这样才可以被new Blob() 解析。 responseType:"blob", //请求参数 get-->params post-->data 。 params:{}, //xml返回数据的钩子函数,可以用来获取数据的进度 具体可查看axios的官网 onDownloadProgress:(progressEvent)=>{ //progressEvent.loaded 下载文件的当前大小 //progressEvent.total 下载文件的总大小 如果后端没有返回 请让他加上! let progressBar = Math.round( progressEvent.loaded / progressEvent.total*100); //接收进度为99%的时候需要留一点前端编译的时间 if(progressBar >= 99){ this.percentage = 99; this.title = '下载完成,文件正在编译。'; }else{ this.percentage = progressBar; this.title = '正在下载,请稍等。'; } } }).then( res =>{ //当前定义res.message 出现的时候说明后端文件返回出现了问题 不然应该直接是个文件流 if(res.message){ this.title = '下载失败' this.isDisabled= false return } //blob返回的是一个 base64 格式的文件流 let blob = new Blob([res],{ //编译文件为xlsx类型。 具体可查看 blob 方法定义的类型 type:"application/vnd.ms-excel" }) //编译文件 if(window.navigator && window.navigator.meSaveOrOpenBlob){ window.navigator.meSaveOrOpenBlob(blob,"文件名称.xlsx") }else{ let Url= window.URL.createObjectURL(blob); let link= document.createElemnet("a"); link.style.display = "none"; link.href = Url; link.setAttribute("download","文件名称.xlsx"); document.body.appendChild(link); link.click(); } //编译文件完成后,进度条展示为100%100 this.percentage =100; //下载完成 可以重新点击按钮下载 this.isDisabled= false; }) } }, }; </script>
标签:文件,Vue,进度条,title,element,link,blob,progressEvent,下载 From: https://www.cnblogs.com/0356dujinshuai/p/17968147