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>

 

 

 

分享持续更新~