el-progress组件

<template>
    <el-dialog :title="title" :visible.sync="loadingShow" width="30%" :modal-append-to-body="false"
               :close-on-click-modal="false"
               :show-close="false" destroy-on-close :close-on-press-escape="false">
        <el-progress :text-inside="true" :stroke-width="24" :percentage="percentage"></el-progress>
    </el-dialog>
</template>

<script>
    export default {
        name: 'EProgress',
        props: {
            percentage: {
                type: Number,
                required: true,
                default: 0
            },
            show: Boolean,
            title: String,
        },
        data() {
            return {
                loadingShow: this.show
            }
        },
        watch: {
            show() {
                this.loadingShow = this.show
            }
        }
    }
</script>

axios api 处理

export function download(data,config) {
    let axiosConfig = {
        url: '/order/download',
        method: 'post',
        responseType: 'blob',
        data: data
    };
    if(config instanceof Object){
        for(let key in config){
            axiosConfig[key] = config[key];
        }
    }
    return request(axiosConfig)
}

axios处理response返回统一处理

        const headers = res.headers;
        const blob = new Blob([res.data], {type: "application/vnd.ms-excel"})
        const fileName = decodeURIComponent(headers["filename"]);
        if ('download' in document.createElement('a')) { // 非IE下载
            const eLink = document.createElement('a');
            eLink.download = fileName;
            eLink.style.display = 'none';
            eLink.href = URL.createObjectURL(blob);
            document.body.appendChild(eLink);
            eLink.click();
            URL.revokeObjectURL(eLink.href); // 释放URL 对象
            document.body.removeChild(eLink)
        } else { // IE10+下载
            navigator.msSaveBlob(blob, fileName)
        }

抽取的js方法作为全局方法

export function diyDownload(api, progressData, data, errorMsg) {
    progressData.loadingShow = true;
    progressData.percentage = 1;
    let flag = true;
    let internal = setInterval(() => {
        progressData.percentage++;
    }, 1000);
    let temp = 100;
    let percentageTemp = 1;
    //进度条配置
    let config = {
        onDownloadProgress: (ProgressEvent) => {
            if (flag) {
                clearInterval(internal);
                temp = Math.sub(temp, progressData.percentage);
                percentageTemp = progressData.percentage;
                flag = false;
            }
            let progressPercent = Math.add(Math.mul(Math.div(ProgressEvent.loaded, ProgressEvent.total), temp), percentageTemp);
            progressData.percentage = Math.ceil(progressPercent);
        }
    };
    api(data, config).then(() => {
        progressData.loadingShow = false;
    }).catch(() => {
        if (errorMsg)
            this.$message.warning(errorMsg);
        else
            this.$message.warning("导出失败，请联系管理员");
        progressData.loadingShow = false;
    });
}

使用

<template>
    <e-progress title="导出进度" :show="progressData.loadingShow" :percentage="progressData.percentage"></e-progress>
</template>

<script>
import * as orderApi from "@/api/order/order";
    export default {
        name: '',
        data() {
            return {
                progressData : {
                    percentage: 0,
                    loadingShow: false,
                }
            }
        },
        methods: {
                let data = {
                    ids: this.tableDataTemp,
                    prop: this.prop,
                    order: this.order,
                    cols: this.colsTemp
                };
                this.diyDownload(orderApi.download, this.progressData, data);
        }
        watch: {
            show() {
                this.loadingShow = this.show
            }
        }
    }
</script>