Vue結合后台導入導出Excel問題詳解后續

接前幾天寫的一篇博客  https://www.cnblogs.com/ttjm/p/11307462.html

在ie瀏覽器測試發現打不開，經調查問題如下

 1 如果在本地開發調試,請求接口報錯如下

 

經查是項目啟動和接口地址不同源ie有所限制,只需npm run build 放到服務器上測試即可

 

2 ie對get請求中url長度的限制是2083字節（2k+35）（我項目的參數超過此字節）

3 ie對get請求中參數可能不能有中文,(帶驗證)

故代碼修改如下

axios({
  method: 'post',//請求方法改為post
  url: 'http://localhost:19090/exportUser',//這個是請求的地址
  params: {//這個是請求的參數
   email: this.email,
   startRegisterDate: this.registerStartTime,
   endRegisterDate: this.registerEndTime
  },
  responseType: 'blob'
  }).then((res) => {
  let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
          if (window.navigator.msSaveBlob) {    //IE以及IE內核的瀏覽器使用
            try {
              window.navigator.msSaveBlob(blob, '支出明細' + '.xls');    
              // window.navigator.msSaveOrOpenBlob(response, fileNm);    //fileNm是文件的名字
            } catch (e) {
              console.log(e);
            }
          }else{
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob);
            let num = ''
            for(let i=0;i < 10;i++){
              num += Math.ceil(Math.random() * 10)
            }
            link.setAttribute('download', '支出明細' + '.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
  }).catch(error => {
 
  console.log(error)
  })

如果是get請求，請求頭不需要額外加參數，直接 window.location.href='http://localhost:19090/exportUser?email='+email+"&start="+start ，（參數中的參數轉碼或者和后台商量不用中文即可）打開一個地址即可