react 请求接口后下载excel

需求：需要请求后台的接口后浏览器导出excel文件，有两种方法。

方法一、直接地址跳转

window.location.href = `地址`     //地址在后台的接口上有显示，直接拿过来就行， 这种方法可以在不需要用户验证的情况下使用。若有设置验证需要添加请求头使用方法二。

方法二、

        请求接口，添加请求头

问题：调接口导出excel，在IE上请求成功后没反应，其他浏览器可实现。

解决： IE的文件下载方式和其他浏览器不同，需要添加判断

代码：

        

       const href = `接口地址`

      const token = localStorage.getItem('sms-token');//获取请求头

      axios.get(href,{

        headers: {

          'Content-Type': 'application/json',

          'Authorization': `${token}`,//添加请求头，没有登入无法调取级

        },

        responseType:'blob'             //转化后台传过来的文件流。很重要！

  },

  )

    .then(res=>{

      console.log(res) 

      var csvData = new Blob([res.data]);

      var file_name = '表格名称.xlsx'

      this.setState({

        loading:false

      })

        // for IE  判断是否IE 

      if (window.navigator && window.navigator.msSaveOrOpenBlob) {

        window.navigator.msSaveOrOpenBlob(csvData, file_name);

      }

      // for Non-IE (chrome, firefox etc.)

      else {

        var a = document.createElement('a');

        document.body.appendChild(a);

        a.style = 'display: none';

        var url = window.URL.createObjectURL(csvData);

        a.href = url;

        a.download = file_name;

        a.click();

        a.remove();

        window.URL.revokeObjectURL(url);

      }