最近开始着手React 学习。
前后端分离，实现EXCEL导出；

1. 后端easypoi 导出excel文件实现方式；

private static void downLoadExcel(String fileName, HttpServletResponse response, Workbook workbook) {
    try {
        response.setCharacterEncoding("UTF-8");
        response.setHeader("content-Type", "application/vnd.ms-excel");
        response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
        workbook.write(response.getOutputStream());

    } catch (IOException e) {
        // throw new NormalException(e.getMessage());
    }
}

2.前端实现方式；

2.1 dowReward

 downRewrd = () => {
    const {address2,blockTime2Start, blockTime2End} = this.state
    if( address2 &&  blockTime2Start && blockTime2End) {
      this.setState({loading: true}, ()=> {
        request.post('/reward-statistics/down-queryNodeDailyReward', {
          "address":address2,
          "startBlockTimestamp":blockTime2Start / 1000,
          "endBlockTimestamp":blockTime2End / 1000
        },{responseType:"blob"}).then(res => {
          console.log("res =="+res);         
          const blob = new Blob([res], {type: 'application/vnd.ms-excel;charset=utf-8'})
          const href = URL.createObjectURL(blob)
          this.download(href, '奖励数目')
          this.setLoading()
        }).catch(err => {
          this.setLoading()
        })
      })
      
    }
  }

2.2 setLoading()

  download = (href, fileName) => {
    const a = document.createElement('a')
    a.download = `${fileName}.xls`
    a.style.display = 'none'
    a.href = href
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
  }

3. 以上方式下载的文件总有乱码，怎么破？

image.png

image.png

由于刚接触框架，没有读底层封装的方法，在其他地方不停尝试，始终一无所谓，未能解决，持续了很久，在刚刚下班前发现问题，原来是关注点错了，需要阅读底层封装的方法；

post 没有设置 responseType,默认返回JSON类型

 //post请求
  post(url, param, baseURL) {
    return new Promise((resolve, reject) => {
      axios({
        method: 'post',
        url,
        data: param,
        cancelToken: new CancelToken(c => {
          cancel = c;
        }),
      }).then(res => {
        resolve(res);
      });
    });
  },

为了避免修改当前方法对其他调用出的影响，重新改方法，设置 responseType:'blob'，完美解决问题

 postBlob(url, param, baseURL) {
    return new Promise((resolve, reject) => {
      axios({
        method: 'post',
        url,
        data: param,
        cancelToken: new CancelToken(c => {
          cancel = c;
        }),
        responseType:'blob'
      }).then(res => {
        resolve(res);
      });
    });
  },

为了走出舒适区，自己较劲了好久，总算解决了，下班。

image.png