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 (!checkedTypes || checkedTypes.length <= 0) {
        return;
      }
      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, encodeURI(item.title) instanceof Array ? encodeURI(item.title[ix]) : encodeURI(item.title))})
            } else {
              this.saveFile(item.domId, item.title);
            }
          }
          if (type === "Excel") {
            const downloadUrl = `${apiUrl}${url}?${params}&localLanguage=${language}&authorization=${this.$cookie.get(
              "atoken"
            )}&title=${encodeURI(item.title)}`;
            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"
      });
      let filename = title + "." + type;
      if(window.navigator.msSaveBlob) {
        var btstr = atob(imgData.split(",")[1]);
        var n = btstr.length;
        var u8arr = new Uint8Array(n);
        while(n--) {
          u8arr[n] = btstr.charCodeAt(n);
        }
        var blob = new Blob([u8arr])
        window.navigator.msSaveOrOpenBlob(blob,filename)
        return 
      }
      imgData = imgData.replace(this.fixType(type), "image/octet-stream");


      let saveLink = document.createElementNS(
        "http://www.w3.org/1999/xhtml",
        "a"
      );
      saveLink.href = imgData;
      saveLink.download = this.IEVersion()?encodeURIComponent(filename):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;
    },
    IEVersion() {
      var userAgent = navigator.userAgent; //ȡ���������userAgent�ַ���  
      var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //�ж��Ƿ�IE<11�����  
      var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //�ж��Ƿ�IE��Edge�����  
      var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
      if(isIE) {
          var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
          reIE.test(userAgent);
          var fIEVersion = parseFloat(RegExp["$1"]);
          if(fIEVersion == 7) {
              return 7;
          } else if(fIEVersion == 8) {
              return 8;
          } else if(fIEVersion == 9) {
              return 9;
          } else if(fIEVersion == 10) {
              return 10;
          } else {
              return 6;//IE�汾<=7
          }   
      } else if(isEdge) {
          return 'edge';//edge
      } else if(isIE11) {
          return 11; //IE11  
      }else{
          return false;//����ie�����
      }
   }
  }
};
</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>