React 实现Excel 文件下载（实现导入导出）

封装的工具类，有页面需要使用此功能时可直接调用：

import apiPath from 'Common/apiPath'
import { message } from 'antd'

const Utils = {
  showErrorMsg: msg => { // 显示错误消息
    message.destroy()
    message.error(msg)
  },
  showSuccessMsg: msg => { // 显示成功消息
    message.destroy()
    message.success(msg)
  },
  showWarnMsg: msg => { // 显示警告消息
    message.destroy()
    message.warn(msg)
  },
 
  // 文件下载
   /** 
   *params 后台接口请求参数
   *url 后台接口地址
   *name 导出文件名称 
   * */ 
  downLoad: async (params = {}, url, name) => {
    console.log('文件下载', params)
    try {
      fetch(url, {
        method: 'POST',
        body: window.JSON.stringify(params),
        credentials: 'include',
        headers: new Headers({
          'Content-Type': 'application/json'
        })
      }).then(response => {
        console.log(response)
        response.blob().then(blob => {
          console.log(window.URL.createObjectURL(blob))
          //  let blobUrl = window.URL.createObjectURL(blob)
          const url = window.URL.createObjectURL(blob)
          const a = document.createElement('a')
          a.href = url
          const fileName = `${name}.xlsx`//想要导出什么文件将.xlsx 改为文件后缀即可
          a.download = decodeURIComponent(fileName)
          a.click()
        })
      }).catch(error => {
        console.log(error)
      })
    } catch (e) {
      console.error('---文件下载异常----', e)
      Utils.showErrorMsg('文件下载失败,请联系管理员!')
    }
  },
}
export default Utils

调用工具类使用方法（以下载模板为例）：

   // 下载模板
    xzmb =() => {
      const downloadUrl = //后台url路径
      const name = '学生数据导入模板'
      Utils.downLoad({
        templateName: '学生数据导入模板' //这是我后台接口需要的参数 通过名称找到文件 并下载
      }, downloadUrl, name)
    }