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 = "導出...";
      });
    },