前端如何识别浏览器类别+Blob流如何兼容IE

浏览器识别和兼容

作为一个后端开发，有时候也要写写前端代码，但是如果让我兼容IE浏览器，我只能够祭上这张图：
。

如何识别浏览器类别

var agent = navigator.userAgent.toLowerCase();
console.log(agent);
 var arr = [];
 var system = agent.split(' ')[1].split(' ')[0].split('(')[1];
 arr.push(system);
 var REGSTR_EDGE = /edge\/[\d.]+/gi;
 var REGSTR_IE = /trident\/[\d.]+/gi;
 var OLD_IE = /msie\s[\d.]+/gi;
 var REGSTR_FF = /firefox\/[\d.]+/gi;
 var REGSTR_CHROME = /chrome\/[\d.]+/gi;
 var REGSTR_SAF = /safari\/[\d.]+/gi;
 var REGSTR_OPERA = /opr\/[\d.]+/gi;
 // IE
 if (agent.indexOf('trident') > 0 && agent.indexOf('msie') === -1) {
   arr.push(agent.match(REGSTR_IE)[0].split('/')[0]);
   arr.push(agent.match(REGSTR_IE)[0].split('/')[1]);
 }
 // OLD_IE
 if (agent.indexOf('msie') > 0) {
   arr.push(agent.match(OLD_IE)[0].split(' ')[0]);
   arr.push(agent.match(OLD_IE)[0].split(' ')[1]);
 }
 // Edge
 if (agent.indexOf('edge') > 0) {
   arr.push(agent.match(REGSTR_EDGE)[0].split('/')[0]);
   arr.push(agent.match(REGSTR_EDGE)[0].split('/')[1]);
 }
 // firefox
 if (agent.indexOf('firefox') > 0) {
   arr.push(agent.match(REGSTR_FF)[0].split('/')[0]);
   arr.push(agent.match(REGSTR_FF)[0].split('/')[1]);
 }
 // Opera
 if (agent.indexOf('opr') > 0) {
   arr.push(agent.match(REGSTR_OPERA)[0].split('/')[0]);
   arr.push(agent.match(REGSTR_OPERA)[0].split('/')[1]);
 }
 // Safari
 if (agent.indexOf('safari') > 0 && agent.indexOf('chrome') < 0) {
   arr.push(agent.match(REGSTR_SAF)[0].split('/')[0]);
   arr.push(agent.match(REGSTR_SAF)[0].split('/')[1]);
 }
 // Chrome
 if (agent.indexOf('chrome') > 0) {
   arr.push(agent.match(REGSTR_CHROME)[0].split('/')[0]);
   arr.push(agent.match(REGSTR_CHROME)[0].split('/')[1]);
 }

 var browse;
 if (arr[1] && arr[2]) {
   browse = arr[1] + ' ' + arr[2];
 } else {
   browse = '未获取到浏览器信息';
 }
 switch (browse) {
   case 'msie 6.0':
   case 'msie 7.0':
   case 'msie 8.0':
   case 'msie 9.0':
   case '未获取到浏览器信息':
     alert("为了给您带来更好的体验，请您使用以下浏览器IE10-11、IE edge、火狐（Firefox）、谷歌（Chrome）");
     break;
 }

在兼容浏览器之前，首先需要识别当前浏览器，以上javascript代码就是识别当前浏览器的。
想要查看浏览器具体信息，可以直接console.log(navigator.userAgent)信息，也可以直接在浏览器的开发者工具中查看随便一个请求：

举个谷歌chrome的例子：

User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36

1. Chrome ：表示该浏览器是谷歌内核；
2. 84.0.4147.89：表示该浏览器的版本号；
3. Win64; x64表示操作系统和位数；
4. 该javascript是为了识别出IE9及以下版本并且直接弹窗提示用户更换到chrome等浏览器；

Blob流兼容IE10-11

如果有文件流Blob等下载，需要兼容IE，可以这么写：

//文件流无法兼容IE，如何改进
// for IE
var projectData = new Blob([data], { type: "application/zip" });
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(projectData, this.ProjectInfo.artifactId + ".zip");
}
// for Non-IE (chrome, firefox etc.)
else {
  const url = window.URL.createObjectURL(projectData);
  const link = document.createElement("a");
  link.style.display = "none";
  link.href = url;
  link.setAttribute("download", this.ProjectInfo.artifactId + ".zip");

  document.body.appendChild(link);
  link.click();
}

其中msSaveOrOpenBlob方法可以识别出是否是IE浏览器，并且兼容IE10、IE11。这样就可以实现IE浏览器和流行的chrome浏览器、firefox浏览器的文件流输出了。