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网络请求的数据。
数据生成时的进度条
