js判断浏览器类型

在实际开发中，会碰到部分业务场景需要判断浏览器类型做不同处理，例如处理下载文件的二进制流，获取到文件名后进行解密，由于火狐浏览器的处理与其他的不一样，所以需要进行判断是否为火狐浏览器，去做不同的解密处理
一、封装方法
目前只做浏览器判断，不做版本判断

const kUserAgent = {
  Opera: 'Opera',
  FF: 'FF',
  Chrome: 'Chrome',
  Safari: 'Safari',
  IE: 'IE',
};

const getUserAgent = () => {
  const { userAgent } = navigator; // 取得浏览器的userAgent字符串
  if (userAgent.indexOf('Opera') > -1) {
    // 判断是否Opera浏览器
    return kUserAgent.Opera;
  }
  if (userAgent.indexOf('Firefox') > -1) {
    // 判断是否Firefox浏览器
    return kUserAgent.FF;
  }
  if (userAgent.indexOf('Chrome') > -1) {
    // 判断是否为谷歌浏览器
    return kUserAgent.Chrome;
  }
  if (userAgent.indexOf('Safari') > -1) {
    // 判断是否Safari浏览器
    return kUserAgent.Safari;
  }
  if (
    userAgent.indexOf('compatible') > -1 &&
    userAgent.indexOf('MSIE') > -1 &&
    userAgent.indexOf('Opera') > -1
  ) {
    // 判断是否IE浏览器
    return kUserAgent.IE;
  }
  return '';
};

二、引入方法

import { getUserAgent, kUserAgent } from './util';

三、使用方法

// 处理下载文件的二进制流
const handleDownloadBlob = (res, fileName) => {
  let filename = fileName;
  if (!filename && res && res.headers && res.headers.get) {
    const contentDisposition = res.headers.get('content-disposition');
    if (contentDisposition) {
      const cdArr = contentDisposition.split('filename=');
      if (cdArr && cdArr.length > 0) {
        filename = cdArr[cdArr.length - 1];
        // 获取到文件名后 进行解密 （火狐浏览器的处理与其他的不一样）
        filename =
          getUserAgent() === kUserAgent.FF
            ? decodeURI(escape(filename))
            : decodeURI(filename);
      }
    }
  }
  if (res && res.blob) {
    res.blob().then(blob => {
      let a = document.createElement('a');
      const url = window.URL.createObjectURL(blob);
      if (filename) {
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
        a = null;
      }
    });
  }
};