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

该博客详细介绍了如何在Vue中创建一个文件下载进度条。通过axios库监听下载进度,并利用el-progress组件展示进度圈。当下载完成时,会提示文件正在编译。同时,文中提到了可能遇到的问题,如文件内容显示为object,提供了相关链接进行解决。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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.youkuaiyun.com/zzz305379801/article/details/121029937

下载的excl文件,内容显示object,object:https://blog.youkuaiyun.com/qq_36873710/article/details/123270166

Vue.js 开发环境中使用 Element UI 相关的插件如 "vue-excel-import" 可以方便地处理 Excel 文件读取。以下是简单的步骤: 1. **安装依赖**: 首先,需要在项目中安装必要的库。运行 `npm install` 或者 `yarn add` 来安装: ```bash npm install axios file-saver js-xlsx element-ui vue-excel-import ``` 2. **引入组件配置**: 引入 Element UI 的表格组件其他必要组件,并在 main.js 中注册 `vue-excel-import` 插件: ```javascript import { ElTable } from 'element-ui'; import { ExcelImport } from 'vue-excel-import'; Vue.use(ExcelImport); ``` 3. **创建 Excel 读取功能**: 创建一个 Vue 组件,例如 `UploadExcel.vue`,并使用 `excel-import` 功能来接收文件并解析数据: ```html <template> <el-button @click="upload">导入 Excel</el-button> <el-table :data="tableData" ref="excelTable"> <!-- 表格列配置 --> </el-table> </template> <script> export default { data() { return { tableData: [], file: null, }; }, methods: { upload() { this.$refs['excelTable'].import({ onBefore(file) { // 这里可以预览文件、限制上传大小等操作 }, onStart({ files }) { // 显示进度条 }, onFinish(result) { const { data } = result; this.tableData = data.map((row) => row.data); // 假设每个sheet的数据是一个数组 }, onError(error) { console.error('导入失败:', error); } }, this.file); } }, // 其他生命周期钩子选项 }; </script> ``` 4. **HTML 表单提交**: 添加一个表单元素让用户选择 Excel 文件,比如使用 `<input type="file" @change="handleFileChange">`,然后在 `handleFileChange` 函数中设置 `this.file`。 注意:实际操作中,你需要处理不同 Excel 格式的问题,例如 `.xls` `.xlsx`,并且根据返回的数据格式适配表格展示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值