React通过fetch请求数据，实现导出功能，兼容火狐和IE

最近项目中需要实现将数据导出excel表格功能，踩了很多坑，现在终于完美实现，分享给大家，希望能帮助大家少踩坑。

/**
 * 拼接对象为请求字符串
 * @param {Object} obj - 待拼接的对象
 * @returns {string} - 拼接成的请求字符串
 */
const encodeSearchParams = (obj) => {
  const params = []

  Object.keys(obj).forEach((key) => {
    let value = obj[key]
    // 如果值为undefined我们将其置空
    if (typeof value === 'undefined') {
      value = ''
    }
    // 对于需要编码的文本（比如说中文）我们要进行编码
    params.push([key, encodeURIComponent(value)].join('='))
  })
   return params.join('&')
}

  import 'isomorphic-fetch'   //fetch兼容IE

  // 导出
  handleExport = (params) => {
    const authUser = () => {  //参数
      return {
        role: 'admin',
        id: 10,
      }
    }
    fetch(`/Api/goods?${encodeSearchParams(authUser())}`, {  //拼接参数
      headers: {
        authorization: 'authorization-text',
        token: `Bearer ${window.localStorage.getItem('token')}`
      },
    }).then(response => response.blob()).then(blob => {
     if (window.navigator && window.navigator.msSaveOrOpenBlob) {  //blob兼容IE
        window.navigator.msSaveOrOpenBlob(blob, '商品信息.xls');
      } else {
        var url = window.URL.createObjectURL(blob);  //使用 createObjectURL 方法，将  blob对象 创建出一个 url 来访问它。
        var a = document.createElement('a');
        document.body.appendChild(a);  //兼容火狐
        a.href = url;
        a.download = '商品信息.xls';
        a.click();
      }
    })

  }