vue+elementui实现文件下载和进度条显示

html

<template>
		<el-button @click="getProgress">点击下载</el-button>
	<!-- 文件下载进度条 -->
        <el-dialog title="正在下载，请等待" :visible.sync="progressShow" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="20%">
            <div style="text-align: center;">
                <el-progress :percentage="percentage" type="circle"></el-progress>
            </div>
        </el-dialog>
</template>
<script >
	export default {
		data() {
			return {
				percentage:0, //进度条的占比
                progressShow: false, // 是否显示进度条弹出层
			}
		},
		methods: {
			// 下载文件进度条
            getProgress(url='http://192.168.1.111/tpdemo/public/uploads/export_xls.xlsx') {
                //进度条恢复为 0 
                this.percentage= 0;
                //发起请求
                this.$axios({
                    url: url,
                    method:"get",
                    responseType:"blob",
                    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.$message.success("下载完成，文件正在编译。");
                            // this.title = '下载完成，文件正在编译。';
                        }else{
                            this.percentage = progressBar;
                            this.$message("正在下载，请稍等。");
                            // this.title = '正在下载，请稍等。';
                        }
                        // console.log(progressEvent)
                    }
                }).then(res => {
                    // console.log(res)
                    if(res.status != 200){
                        this.$message.error("文件下载失败，请稍后重试！");
                        return false;
                    }
                    //blob返回的是一个 base64 格式的文件流
                    let blob = new Blob([res.data],{
                        //编译文件为xlsx类型。 具体可查看 blob 方法定义的类型 
                        type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                    })
                    //编译文件
                    if(window.navigator && window.navigator.meSaveOrOpenBlob){
                        window.navigator.meSaveOrOpenBlob(blob,"文件名称.xlsx")
                    }else{
                        // 非ie的下载
                        const link = document.createElement('a');
                        const body = document.querySelector('body');
                        link.href = window.URL.createObjectURL(blob);
                        link.download = '年检年报查询_'+new Date().getTime(); // 下载的文件名
                        // fix Firefox
                        link.style.display = 'none';
                        body.appendChild(link);
                        link.click();
                        body.removeChild(link);
                        window.URL.revokeObjectURL(link.href);
                    }
                    //编译文件完成后，进度条展示为100%100
                    this.percentage =100;
                    this.progressShow = false; // 关闭进度条显示层

                })
            },
		}
	}
</script>

参考：https://blog.csdn.net/zzz305379801/article/details/121029937

下载的excl文件，内容显示object，object：https://blog.csdn.net/qq_36873710/article/details/123270166