element+后台管理系统数据导出+进度条导出

文章目录

element+后台管理系统数据导出+进度条导出
一、项目需求？
二、使用方法
- 1.将进度条封装成组件，需要的值通过父组件传递
- 2.父组件引入
- 后台接口如下：

提示：以下是本篇文章正文内容，下面案例可供参考

一、项目需求？

根据后台提供的数据进行excel导出，导出时显示进度条以优化用户体验。

二、使用方法

1.将进度条封装成组件，需要的值通过父组件传递

代码如下（示例）：

<template><div ><!-- 进度条 --><div v-show="progress" class="progressBox"><el-progress:percentage="percentage"type="circle":show-text="true":stroke-width="8":width="60"color="#33cbcc"/><div v-if="percentage == 0 && percentage < 100" class="txtContent">数据生成中...</div><div v-if="percentage == 100" class="txtContent">数据生成成功，<a:href="downloadHref"download="数据.xls"class="txtDownload">点击下载</a><span class="el-icon-error" @click="controlClose"> </span></div></div></div>
</template><script>
export default {name: 'ProgressBar',props: {percentage: {type: Number,default: 0},progress: {type: Boolean,default: false},downloadHref: {type: String,default: ''}},created() {console.log(this.progress, 'progress')},methods: {/** 导出样式关闭 */controlClose() {this.$emit('clearShow')}}}
</script ><style scoped>
.progressBox {position: fixed;bottom: 150px;right: 70px;display: flex;z-index: 10;
}
.circleOne {position: relative;box-shadow: 0 3px 6px 0 rgba(40, 50, 67, 0.25);
}
.txtContent {height: 40px;line-height: 40px;margin-top: 10px;padding-left: 30px;padding-right: 10px;border: 1px solid #33cbcc;background: #fff;border-radius: 20px;margin-left: -25px;color: #666;width: 204px;font-size: 12px;-webkit-box-shadow: 0 3px 6px 0 rgba(40, 50, 67, 0.25);box-shadow: 0 3px 6px 0 rgba(40, 50, 67, 0.25);overflow: hidden;
}
.txtDownload {color: #33cbcc;cursor: pointer;margin-right: 10px;
}
.el-progress {background: #ffffff;border-radius: 50%;
}
</style>

2.父组件引入

代码如下（示例）：

  <!-- 进度条 --><Progress-bar :percentage="percentage" :progress="progress" :download-href="downloadHref" @clearShow="clearShow"></Progress-bar>

import ProgressBar from '@/components/ProgressBar'
export default {components: {ProgressBar},data() {return {percentage: 0, // 附件上传进度条百分比progress: false, // 附件上传进度条显示状态downloadHref: '' // 下载的URL地址}}methods:{/** ************** *///exportExcel为导出按钮，通过slot-scope拿到并传入当前行的id给后台async exportExcel(row) {const that = thisthis.progress = trueawait exportBillManageExam_api(row.examId, function(progressEvent) {that.onDownloadProgress(progressEvent)}).then((res) => {if (res) {const blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'})const filName = '数据'if (window.navigator.msSaveOrOpenBlob) {navigator.msSaveBlob(blob, filName)} else {this.downloadHref = URL.createObjectURL(blob) // 创建新的URL表示指定的blob对象}} else {this.$notify({title: this.$t('notify.failure'), // '失败'message: res.message,type: 'error',duration: 2000})this.clearShow()}}).catch((err) => {this.clearShow()console.log(err)})},/** 接口调用进度条 百分百值 */onDownloadProgress(progressEvent) {//进度条的值 = progressEvent事件里的loaded/total，total需要后台在响应头添加content-length进行计算//content-length是数据的真实长度。this.percentage = (progressEvent.loaded / progressEvent.total) * 100},// 子传父修改样式状态clearShow() {this.progress = falsethis.percentage = 0},/** ********************* */}}

后台接口如下：

onDownloadProgress是axios的原生事件，处理下载，通过callback回调progressEvent事件

export function exportBillManageExam_api(examId, callback) {return request({url: `/candidate/exportBillManageExam/${examId}`,method: 'get',responseType: 'arraybuffer',onDownloadProgress: function(progressEvent) {// 处理原生进度事件callback(progressEvent)}})
}

该处使用的url网络请求的数据。

数据生成时的进度条

element+后台管理系统数据导出为excel+进度条导出相关推荐

java excel进度条_导出excel 用easyui显示进度条(也适用于其他框架遮罩层，进度条)...
每次我们导出excel的时候 ,如果数据量很大,导出花费的时间会很长,页面却有没人任何反应,这个时候用户会认为系统有问题,要么关了页面,要么狂点导出.感知太差了~甚至用户误操作会导致服务器崩溃. 所以 ...
大数据量的Excel导入和导出
大数据量的Excel导入和导出涉及到的技术 poi:使用SXSSFWorkbook,对数据进行分页且批量写入到磁盘(可以是任何outputsteam),减少数据在内存中的存储 easyExcel:从 ...
xlsxwriter进度条php,PHP导出Excel数据导出，前端进度条实现方式
效果如上,结合layer组件以及ajax分页实现,具体代码如下前端代码用户数据导出 // 执行事件 function exportData() { var loading = layer.load ...
vue导入excel进度条_Vue结合后台导入导出Excel问题详解
最近Vue项目中用到了导入导出功能,在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录. 导出Excel功能这里不谈别人怎么实现的,我是从后台生成了Excel流文件 ...
vue+element后台管理系统(下载excel表格)
标题 vue后台管理系统下载excel表格 1.调用后台接口传入三个参数,url,data参数,第三个参数为一个对象,表格下载返回类型. 2.创建 Blob实列传入后台返回的数据和以对象形式声明类型参 ...
excel进度条与百分比不符_用Python操作Excel数据
今天给大家展示一个python操作Excel的小demo,demo的例子比较简单,如果大家有什么建议,欢迎可以直接在函数君的微信后台留言. 首先,我们需要安装python在我们的电脑上. 安装的步骤如 ...
java进度条_Java web实时进度条整个系统共用(如java上传、下载进度条、导入、导出excel进度条等)...
先上图: 文件上传的: 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 2019-03-26更新进度条显示体验从服务器上压缩下载: 从 ...
php 导出excel 进度条显示
下载大量数据到Excel表格时,无法查看下载的实时进度. 效果展示: 1.统计数据数量: 2.显示数量: 3.下载进度条展示: 代码: 1.前端显示代码 [html] view plaincopy & ...
Java web实时进度条整个系统共用(如java上传、下载进度条、导入、导出excel进度条等)...
先上图: 文件上传的: 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 从服务器上压缩下载: 从excel文件导入数据: 从数据库导出e ...

element+后台管理系统数据导出为excel+进度条导出

element+后台管理系统数据导出+进度条导出

文章目录

一、项目需求？

二、使用方法

1.将进度条封装成组件，需要的值通过父组件传递

2.父组件引入

后台接口如下：

element+后台管理系统数据导出为excel+进度条导出相关推荐

最新文章

热门文章