vue+springcloud 导出excel乱码解决问题

在项目中需要是用excel导出功能，本来是一个很正常的功能，后端使用poi就可以导出。但是在实际使用中发现，在vue+微服务的框架下，poi导出的excel存在乱码问题，设置了编码格式也无法解决。

image.png

理论上这个问题应该在后端解决，但是目前还没找到解决方案。以后有思路了再来补上，暂时先记录前端解决方案

1、前端在进行excel请求的时候，指定axios的数据返回类型为blob

/**

 * excel导出  请求地址
 * @param url
 * @param param
 */
export function requestExcel(url, param) {
  return request({
    url: '/api' + url,
    method: 'post',
    data: param,
    responseType: 'blob', // 表明返回服务器返回的数据类型
    headers: {
      'Content-Type': 'application/json'
    }
  })
}

2、后端正常解析，使用poi，流 写出数据，不管乱码

@PostMapping("/ExportList")

    @ApiOperation("列表导出api")
    public void ExportList(@RequestBody PurchaseReport entity,HttpServletResponse response) throws IOException {
        response.setContentType("application/vnd.ms-excel,charset=utf-8");
        response.setHeader("Content-disposition", "attachment");
        List<PurchaseReport> purchaseReportList = feignApi.getPurchaseReportList(entity);
        ExcelExportUtil.exportExcel2003(response,purchaseReportList);
    }

3、前端收到数据，使用blob解析数据

/**

 * excel 下载，请求excel导出过后使用
 * @param res
 * @param name
 */
export function downloadExcel(res, name) {
  const blob = new Blob([res])
  // 文件名
  const fileName = name + dayjs().format('YYYY-MM-DD') + '.xlsx'
  const elink = document.createElement('a')
  elink.download = fileName
  elink.style.display = 'none'
  elink.href = URL.createObjectURL(blob)
  document.body.appendChild(elink)
  elink.click()
  URL.revokeObjectURL(elink.href)
  document.body.removeChild(elink)
}