黑豹程序员-vue3下载时显示下载的百分比

本文链接：https://blog.csdn.net/nutony/article/details/136484442

原理

axios 有一个方法：onDownloadProgress，它可以实时返回e.loaded 已经加载的值和e.total总数，
Math.round(e.loaded / e.total * 100) 通过计算刚好获取到已经处理的百分比。

实现代码

<template>
  <div>
    <button @click="downLoad(' 天农商-融联易云.pdf')">下载</button>

    <p>
      下载进度:{{downLoadProgress}}
    </p>
    <p>
      圆形：
      <el-progress type="dashboard" :percentage="downLoadProgress" :color="colors" />
    </p>
    <p>
      横条：
      <el-progress :percentage="downLoadProgress" :color="colors" />
    </p>

  </div>
</template>


<script setup>
import { ref } from 'vue';
import axios from 'axios'

var downLoadProgress=ref(0) //定义下载进度
const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]


//下载
var downLoad=function( fileName ){
  axios.post("/api-basic/download", null, {
    params: {
      filePath: '/redis-latest.tar',
    },
    responseType: 'blob',
    onUploadProgress: function(progressEvent) {
      // 上传进度监听回调函数
    },
    onDownloadProgress: function(e) {
        downLoadProgress.value = Math.round(e.loaded / e.total * 100) //实时获取最新下载进度
    }
  }).then(res=>{
    let link = document.createElement("a");
    link.href = URL.createObjectURL(res.data);
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    URL.revokeObjectURL(link.href);

  })
}
</script>