vue 导出功能实现

vue 导出功能实现

导出接口封装

    exportMethod(url, data) {
        return axios({
            method: 'post',
            headers: {
                "Content-Type": "application/json",
                "Authorization": cookie.getCookie('token'),
            },
            responseType: 'blob',
            baseURL: AllURL,
            // baseURL: HalfUrl,
            url,
            data: data,
            timeout: 30000
        })
    },

导出功能（附代码）

HTML部分：
<el-button plain icon="search" @click="exportExcle()" type="primary"
           v-loading.fullscreen.lock="fullscreenLoading">导出</el-button>

逻辑部分：
methods: {
  //导出
  exportExcle() {
    this.fullscreenLoading = true;
    this.$http.exportMethod("/aim/physical/expDevice", this.queryData).then(
      res => {
        var disposition = res.headers['content-disposition']
        var fileName = decodeURI(disposition.substring(disposition.indexOf('filename=') + 9, disposition.length))
        const link = document.createElement("a");
        let blob = new Blob([res.data], {type: "application/vnd.ms-excel;charset=utf-8"});
        var explorer = window.navigator.userAgent
        if (!!window.ActiveXObject ||
          "ActiveXObject" in window ||
          navigator.userAgent.indexOf("Edge") > -1) {
          let fileName = fileName;
          navigator.msSaveBlob(blob, fileName);
        } else {
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.download = fileName; //下载的文件名
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
        this.fullscreenLoading = false;
      },
      error => {
        // var enc = new TextDecoder('utf-8')
        // var res = JSON.parse(enc.decode(new Uint8Array(err.data)))
        this.fullscreenLoading = false;
      }
    );
  },

OK啦。。。。。。。。。。。。。。