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

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

---

---

---

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

一、项目需求？

根据后台提供的数据进行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 = this
      this.progress = true
      await 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 = false
      this.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网络请求的数据。

数据生成时的进度条

---