前端展示下载进度条；取消下载操作；

展示下载进度条，替换url即可；原文请点击

<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>

下载到一半想取消下载？ 原文请点击

<template>
   <div>
      <button @click="sendAxios">发送axios</button>
      <button @click="cancelHandert">取消请求</button>
      <button @click="sendAxios2">发送axios@2</button>
   </div>
</template>
<script lang="ts" setup>
import axios from 'axios'
function sendAxios() { 
   SendGiveServe()
}
let CancelToken;
let source:any;
function SendGiveServe() { 
   CancelToken = axios.CancelToken
   source = CancelToken.source()
   axios.get('https://xxx.com/list',{name:'张三'}, {
    cancelToken: source.token
   }).then(function (response) {
      console.log('返回来的数据1', response)
   }).catch(thrown => { 
      if (axios.isCancel(thrown)) {
         console.log('请求已经取消了==>', thrown.message);
      } else {
         // 处理错误
      }
   });
}

function cancelHandert() { 
   source&&source.cancel('取消请求1') //取消请求，参数可选
}

function sendAxios2() { 
   axios.get('https://xxx.com/list').then(function (response) {
      console.log('返回来的数据sendAxios2', response)
   })
}
</script>