javascript 接收blob流数据, 并导出(兼容主流浏览器)

近期做项目遇到的兼容性问题, 在此记录:

  blobToExcel (blob, filename) {
    let fname = filename
    if (navigator.userAgent.indexOf('Firefox') >= 0) {
      let point = filename.indexOf('.')
      if (point == -1) {
        fname = filename + '.xls'
      } else {
        fname = filename
      }
    }
    if(window.navigator.msSaveBlob){
      // for ie 10 and later
      try{
          // var blobObject = new Blob([self.output]); 
          window.navigator.msSaveBlob(blob, filename + '.xls'); 
      } catch(e){
          console.log(e);
      }
    } else {
      let IEVersion = this.IEVersion()
      let evt = document.createEvent("MouseEvents");  
      let link = window.URL.createObjectURL(blob)
      let a = document.createElement('a')
      a.setAttribute('download', fname)
      a.href = link
      if ( IEVersion == -1) {
        /** 非IE, 兼容FF, ch */
        evt.initEvent("click",true,true);  
        a.dispatchEvent(evt);
      } else {
        a.click()
      }
      window.URL.revokeObjectURL(link)
    }
  },
  IEVersion() {
    var userAgent = window.navigator.userAgent; //取得浏览器的userAgent字符串  
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
    var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
    var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
    if(isIE) {
      var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
      reIE.test(userAgent);
      var fIEVersion = parseFloat(RegExp["$1"]);
      if(fIEVersion == 7) {
        return 7;
      } else if(fIEVersion == 8) {
        return 8;
      } else if(fIEVersion == 9) {
        return 9;
      } else if(fIEVersion == 10) {
        return 10;
      } else {
        return 6;//IE版本<=7
      }   
    } else if(isEdge) {
      return 'edge';//edge
    } else if(isIE11) {
      return 11; //IE11  
    } else{
      return -1;//不是ie浏览器
    }
  }
  }

 其中,IEVersion方法摘自大佬的方案, 相对比较完整

目前方法已兼容IE10+、FF、chrome。

接收参数(blob, filename), 在chrome中, filename会自动添加下载的文件后缀名, FF以及IE需要自行补充。

你可能感兴趣的:(前端)