examcloud-admin-web/src/modules/oe/component/commonExport.vue

<template>
  <span>
    <el-button
      type="primary"
      v-show="!exportLoading"
      @click="exportData"
      size="small"
      icon="el-icon-download"
      >导出
    </el-button>
    <el-button
      size="small"
      icon="el-icon-download"
      :loading="true"
      v-show="exportLoading"
      >导出数据中...
    </el-button>
  </span></template
>
<script>
export default {
  props: ["form", "exportUrl", "exportFileName"],
  data() {
    return { exportLoading: false };
  },
  methods: {
    exportData() {
      if (!this.form.examId) {
        this.$notify({
          title: "警告",
          message: "请选择考试批次",
          type: "warning",
          duration: 1000
        });
        return false;
      }
      this.$confirm("确定执行导出?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        this.$http
          .get(this.exportUrl, {
            params: {
              query: this.form
            },
            responseType: "arraybuffer",
            timeout: 20 * 60 * 1000 //限时20分钟
          })
          .then(response => {
            if (response.data) {
              var blob = new Blob([response.data], {
                type:
                  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
              });
              var url = URL.createObjectURL(blob);
              var a = document.createElement("a");
              a.href = url;
              a.download = this.exportFileName + ".xlsx";
              a.target = "_blank";
              a.click();
              URL.revokeObjectURL(url);
            }
            this.exportLoading = false;
          });
      });
    }
  }
};
</script>