vue实现数据下载与导出

效果图：

功能描述：点击导出，实现数据下载； 

 实现代码

    //导出数据
    exportData() {
      let status = "searchType=" + this.searchType;
      let filterArr = [];
      filterArr.push(status);
      this.load2 = true;
      this.loadtext = "正在导出中...";
      this.$http({
        url: this.$http.adornUrl("/wad/log/export"),
        method: "get",
        responseType: "blob",
        params: this.$http.adornParams({
          filter: filterArr.toString(),
          page: this.currentPage4,
          size: this.pagesize
        })
      }).then(({ data }) => {
        var blob = new Blob([data], {
          type:
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
        });
        if (window.navigator.msSaveBlob) {
          //没有此判断的话，ie11下的导出没有效果
          window.navigator.msSaveBlob(blob, unescape("日志.xlsx"));
        } else {
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = unescape("日志.xlsx");
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        }
        this.load2 = false;
        this.loadtext = "导出...";
      });
    },