Vue 項目關於兼容 IE9的分享

一. 文件下載

一開始使用axios下載，判斷IE和chrome 使用的不同的方法都用到了blob ，在IE高版本和chrome上都沒有問題，但是IE9 就下載沒反應，一查資料顯示blob方法只支持到IE10

axios({
            method: "post",
            url: "接口地址",
            data: {
　　　　　　　　...參數
            },
            responseType: "blob"
          })
            .then(res => {
              let _this = this;
　　　　　　　　 //文件讀取函數
              let fileReader = new FileReader();
　　　　　　　　 //保存返回結果
              this.result = res.data;
              fileReader.onload = function() {
                try {
                  let jsonData = JSON.parse(_this.result); // 說明是普通對象數據，后台轉換失敗
                  if (jsonData.jsonError) {
                    _this.$error(jsonData.jsonError[0]._exceptionMessage);
                    return false;
                  }
                } catch (err) {
                  // 解析成對象失敗，說明是正常的文件流
                  let filename = res.headers["content-disposition"]
                    .split(";")[1]
                    .split("filename=")[1];
                  let content = res.data;
                  let blob = new Blob([content]);
                  if (
                    _this.$util.isIE() &&
                    window.navigator &&
                    window.navigator.msSaveOrOpenBlob
                  ) {
                    window.navigator.msSaveOrOpenBlob(blob, filename);
                  } else {
                    let link = document.createElement("a");
                    link.style.display = "none";
                    var link_url = window.URL.createObjectURL(blob);
                    link.href = link_url;
                    document.body.appendChild(link);
                    link.setAttribute("download", filename);
                    link.click();
                    document.body.removeChild(link);
                    window.URL.revokeObjectURL(link_url);
                  }
                }
              };
              fileReader.readAsText(res.data);
            })
            .catch(error => {});

試了不少方法最后還是采用最原始的方法去下載--- a標簽下載

但是就存在至今還沒解決的問題 --- 如果下載的文件異常也就是后台返回的是報錯信息（JSON），這樣的話也是成文件一樣下載

const ie9Download = (url,params) => {
  let link = document.createElement('a');
  link.style.display = 'none';
  link.href = url+'?'+util.getParams(params);  // 因不兼容Blob，此處可直接拼接URL。缺點是請求過程不可控
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

//上傳對象參數轉成url參數
const getParams = (params) => {
  let paramStr = '';
  Object.keys(params)
      .forEach((item) => {
          if (paramStr === '') {
              paramStr = `${item}=${params[item]}`;
          } else {
              paramStr = `${paramStr}&${item}=${params[item]}`;
          }
      });
  return paramStr;
}

//判斷是否是IE9
const isIE9 = () => {
  if (navigator.userAgent.indexOf("MSIE")>0 && navigator.userAgent.indexOf("MSIE 9.0")>0){
    return true;
  }else{
    return false;
  } 
}

 

二.莫名有些輸入框不能輸入（輸入即退格）

 在測試IE9時發現，有些輸入框不能輸入，輸入就被刪除，也與正常的輸入框對比過方法，基本一致，

后來查到可能是 IE9 不支持 console.log 的問題（但是也沒找什么地方使用了），於是嘗試在全局重寫該方法,結果問題解決了。

//解決ie9以下 console.log未定義
    window.console = window.console || (function () {
  　　var c = {};
  　　c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile = c.clear =      c.exception = c.trace = c.assert = function () { };
  　　return c;
    })();

 

三.關於樣式兼容

由於IE9 不支持 Flex ，所以沒有辦法使用彈性布局

① 使用 inline-block 代替 flex ;

② 為IE9設置單獨的樣式。可以在樣式后加 “ \9 ” 。

 

四.網站加入兼容視圖后，默認低版本顯示，導致白屏

Vue支持IE9+,，再低版本就不支持了，所以最低只能以IE9運行，所以需要在Header標簽中設置兼容視圖

 

<!-- 修改兼容視圖，默認最高 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>

 

 

 

分享持續更新~