在vue中使用ajax原聲程式碼進行匯出操作

一、背景

    因公司需要，我需要在原有的程式碼上進行迭代操作，需要對匯出進行許可權過濾，header中新增token以及UID等一系列的引數用於攔截資訊，但由於請求之前是使用的window.location.href="xxxxxx"進行的跳轉下載，所以無法在此基礎上進行標頭檔案引數新增操作，並且之前並沒有對get請求的引數進行統一處理

二、解決方法

    1、遇到這個問題我首先想到的就是使用ajax方法，在請求之前進行header引數的新增，話不多說我們開始寫程式碼

    

    執行

    

    可以看出我們的請求是成功了，但是你會發現並沒有excl表格被下載下來，後來發現是因為ajax在匯出表格的時候是無法成功下載的，那我們換一種方式來進行下載，使用原生的ajax寫一個類似form表單提交的方式

    2、

postExcelFile(param){
          var xhr ;
          if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
          }else{//code for IE6,IE5
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
          }
          //匯出路徑以及引數
          var url = exportDoubtForProvinceUrl(param) + "?resultId="+this.logId+"&uid="+this.$store.state.user.userId;
          console.info("url:" + url);
          //設定響應型別為blob型別
          xhr.responseType = "blob";
          //設定請求型別為get
          xhr.open("get", url, true);
          let uuid = UUID.createUUID();
          uuid = uuid.replace(/\-/g, '');
          //設定header引數  token
          xhr.setRequestHeader("token",uuid);
          //設定header引數  userid
          xhr.setRequestHeader("iscUserId",this.getIscUserId(uuid));

          console.info("iscUserId:" + this.getIscUserId());
          //onload是隻有在執行的時候會起作用
          xhr.onload = function () {
            let result = true;     //預設介面呼叫失敗
            let blob = xhr.response;  //xhr.response -->blob 資料來源
            let fr = new FileReader(); //FileReader可以讀取Blob內容
            fr.readAsText(blob); //二進位制轉換成text
            fr.onload = function (e) {  //轉換完成後，呼叫onload方法
              result = fr.result;  //result 轉換的結果
              console.info("返回資料：" + e);
            }
            //此處是用來區分後臺的資料來源是檔案、圖片流，還是我們的告警資訊，（如果是告警資訊，size會很短）
            if(blob.size < 200) {
              result = false;
            }
            if (result) {
              //獲取響應檔案流　　
              let blob = this.response;
              let reader = new FileReader();
              // 轉換為base64，可以直接放入a表情href
              reader.readAsDataURL(blob);
              reader.onload = function (e) {
                //解決瀏覽器相容性問題
                let objectUrl = window.URL.createObjectURL(blob);

                // 轉換完成，建立一個a標籤用於下載
                let a = document.createElement('a');
                
                a.href = objectUrl;
                a.download = '結果明細.xls';
                //a.click();    //一般到了這就可以了，但是火狐和google可能會有問題，需要下面的一步操作才可以下載成功，否則會下載下一個沒有字尾名的檔案

                // 修復瀏覽器中無法觸發click
                $("body").append(a);
                a.click();
                $(a).remove();
              }
            }else{
              console.info("匯出異常" + result.msg);
            }
          }
          xhr.send();
        },

    

    從括號裡面的數值就知道我測試了多少次，這也是我從各大大佬的部落格裡面參考過來進行測試的結果