exportData.vue

<template>
  <el-dialog
    :title="$t('allPages.loadData')"
    :lock-scroll="false"
    :visible="dialogVisible"
    width="30%"
    @close="closeClick"
    class="upDatadialog"
  >
    <span>{{ $t('allPages.loadType') }}</span>
    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
      class="allCheck"
    >{{ $t('allPages.all') }}</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group
      class="export-checkbox"
      v-model="checkedTypes"
      @change="handlecheckedTypesChange"
    >
      <el-checkbox v-for="item in exportTypes" :label="item" :key="item">{{ i18nFomatter(item) }}</el-checkbox>
    </el-checkbox-group>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">{{ $t('button.cancel') }}</el-button>
      <el-button type="primary" @click="exportHandle">{{ $t('button.confirm') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      isIndeterminate: false,
      checkAll: false,
      checkedTypes: [],
      exportTypes: ["Image", "Excel"],
      propData: {},
      isCallback: false
    };
  },
  methods: {
    dialogInit(data, isCallback = false) {
      if (data instanceof Array) {
        this.propData = data;
      } else {
        this.propData = [];
        this.propData.push(data);
      }
      this.isCallback = isCallback;
      this.dialogVisible = true;
    },
    i18nFomatter(type) {
      let langeType = "allPages." + type;
      return this.$t(langeType);
    },
    handleCheckAllChange(val) {
      this.checkedTypes = val ? this.exportTypes : [];
      this.isIndeterminate = false;
    },
    handlecheckedTypesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.exportTypes.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.exportTypes.length;
    },
    exportHandle() {
      const { isCallback, checkedTypes, propData } = this;
      if (isCallback) {
        for (let type of checkedTypes) {
          if (type === "Image") {
            propData.forEach(item => {
              if (item.domId instanceof Array) {
                item.domId.forEach((elemId, ix) => {
                  this.saveFile(elemId, item.title instanceof Array ? item.title[ix] : item.title);
                })
              } else {
                this.saveFile(item.domId, item.title);
              }
            });
          } else {
            this.$emit("downloadChange", type);
          }
        }
        return;
      }
      let exportChartType = "";
      let language = localStorage.getItem("lang");
      if (language) {
        const languageObj = {
          mall_CN: "zh_CN",
          zh_CN: "zh_CN",
          en_US: "en_US",
          zh_TW: "zh_TW"
        };
        language = languageObj[language] || window.navigator.language;
      }
      for (let type of checkedTypes) {
        propData.forEach(item => {
          const { domId, title, data } = item;
          const { url, params } = data;
          const { apiUrl } = window._vionConfig;
          if (type === "Image") {
            if (domId instanceof Array) {
              domId.forEach((elemId, ix) => {
                this.saveFile(elemId, item.title instanceof Array ? item.title[ix] : item.title);
              })
            } else {
              this.saveFile(item.domId, item.title);
            }
          }
          if (type === "Excel") {
            const downloadUrl = `${apiUrl}${url}?${params}&localLanguage=${language}&authorization=${this.$cookie.get(
              "atoken"
            )}`;
            window.open(downloadUrl);
          }
        });
      }
    },
    fixType(type) {
      type = type.toLowerCase().replace(/jpg/i, "jpeg");
      let suffix = type.match(/png|jpeg|bmp|gif/)[0];
      return "image/" + suffix;
    },
    saveFile(domId, title) {
      let myChart = {};
      let chartDom = document.getElementById(domId);
      if (this.$echarts.getInstanceByDom(chartDom)) {
        myChart = this.$echarts.getInstanceByDom(chartDom);
      } else {
        myChart = this.$echarts.init(chartDom);
      }

      let type = "png";
      let imgData = myChart.getDataURL({
        type: "png",
        pixelRatio: 2,
        backgroundColor: "#fff"
      });
      imgData = imgData.replace(this.fixType(type), "image/octet-stream");

      let filename = title + "." + type;
      let saveLink = document.createElementNS(
        "http://www.w3.org/1999/xhtml",
        "a"
      );
      saveLink.href = imgData;
      saveLink.download = filename;

      let mouseEvt = document.createEvent("MouseEvents");
      mouseEvt.initMouseEvent(
        "click",
        true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null
      );
      saveLink.dispatchEvent(mouseEvt);
    },
    closeClick() {
      this.checkAll = false;
      this.isIndeterminate = false;
      this.checkedTypes = [];
      this.dialogVisible = false;
    }
  }
};
</script>

<style>
.upDatadialog {
  text-align: left;
}
.upDatadialog .el-dialog__body {
  padding: 10px 20px !important;
  font-size: 17px !important;
}
.upDatadialog .el-dialog__header {
  background-color: #409eff;
  padding: 10px 20px;
}
.upDatadialog .el-dialog__title {
  color: #fff;
}
.upDatadialog .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.upDatadialog .el-dialog__footer {
  padding: 0px 15px 15px;
}
.allCheck {
  position: absolute;
  left: 150px;
}
.export-checkbox {
  font-size: 0px;
  margin-left: 130px;
}
</style>