VUE+elementUI下载大文件进度条时时显示

1.在前端引用elementUI

  <el-progress type="circle" :percentage='jindu'></el-progress>
  <el-button type="primary" size="mini" @click="bigdownload()" style="height: 45px;margin-left: 500px;margin-top: 300px">点击下载大文件</el-button>

2.在js里面声明组件，和data输出化

import {Progress} from 'element-ui';
import Vue from 'vue';
Vue.use(Progress);
export default {
data() {
  return {
    jindu:0,
  }
},

图片.png

3.关键在于这个请求的方法

methods: {
  bigdownload() {
    var that = this;
    var page_url = 'http://localhost:60076/api/DownloadBigfile';
    var req = new XMLHttpRequest();
    req.open("get", page_url, true);
    //监听进度事件
    req.addEventListener("progress", function (evt) {
      if (evt.lengthComputable) {
         //保留小数点后4位
        console.log(Math.floor((evt.loaded / evt.total) * 10000)/10000);
        that.jindu = parseInt((evt.loaded / evt.total) * 100);
      //  that.$set(that.jindu,0,that.jindu)
      //  $("#progressing").html((percentComplete * 100) + "%");
      }
    }, false);
    req.responseType = "blob";
    req.onreadystatechange = function () {
      if (req.readyState === 4 && req.status === 200) {
        //var filename = $(that).data('filename');
        var filename = 'test.pdf';
        if (typeof window.chrome !== 'undefined') {
          // Chrome version
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(req.response);
          link.download = filename;
          link.click();
        } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
          // IE version
          var blob = new Blob([req.response], { type: 'application/force-download' });
          window.navigator.msSaveBlob(blob, filename);
        } else {
          // Firefox version
          var file = new File([req.response], filename, { type: 'application/force-download' });
          window.open(URL.createObjectURL(file));
        }
      }
    };
    req.send();
  },
}

4.在浏览器中设置节流这里选择3g网络

图片.png

5.可以看到效果

123123123.gif