在项目中需要是用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)
}
