利用ajax实现excel报表导出【解决乱码问题】,供大家参考,具体内容如下
背景
项目中遇到一个场景,要导出一个excel报表。由于需要token验证,所以不能用a标签;由于页面复杂,所以不能使用表单提交。初步考虑前端使用ajax,后端返回流,定义指定的header。
第一版
主要代码
前端
使用jquery的ajax
var queryParams = {"test":"xxx"}; var url = "xxx"; $.ajax({ type : "POST", //提交方式 url : url,//路径 contentType: "application/json", data: JSON.stringify(queryParams), beforeSend: function (request) { request.setRequestHeader("Authorization", "xxx"); }, success : function(result) { const blob = new Blob([result], {type:"application/vnd.ms-excel"}); if(blob.size < 1) { alert('导出失败,导出的内容为空!'); return } if(window.navigator.msSaveOrOpenBlob) { navigator.msSaveOrOpenBlob(blob, 'test.xls') } else { const aLink = document.createElement('a'); aLink.style.display = 'none'; aLink.href = window.URL.createObjectURL(blob); aLink.download = 'test.xls'; document.body.appendChild(aLink); aLink.click(); document.body.removeChild(aLink); } } });
后端
使用easypoi(如何使用easypoi请自行百度)
import cn.afterturn.easypoi.excel.ExcelExportUtil; import cn.afterturn.easypoi.excel.entity.ExportParams; @PostMapping(value = "/download") public void downloadList(@RequestBody Objct obj, HttpServletResponse response) { ...... List<Custom> excelList = new ArrayList<>(); // excel总体设置 ExportParams exportParams = new ExportParams(); // 指定sheet名字 exportParams.setSheetName("test"); Workbook workbook = ExcelExportUtil.exportExcel(exportParams, Custom.class, excelList); response.setContentType("application/vnd.ms-excel"); response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("test", "utf-8") + ".xls"); OutputStream outputStream = response.getOutputStream(); workbook.write(outputStream); outputStream.flush(); outputStream.close(); ...... }
测试结果
excel能正常导出,但下载下来的excel全是乱码。经过各种找答案,整理了一下可能是以下原因导致:
1、后端未设置字符集,或者在spring框架的过滤器中统一设置了字符集;
2、前端页面未设置字符集编码;
3、需要在ajax中添加 request.responseType = “arraybuffer”;
经过不断测试,我的应该是第三点导致。但在jquery ajax 中添加后仍然不起作用,乱码问题始终无法解决。
第二版
主要代码
前端,使用原生的ajax。后端未变动。
var xhr = new XMLHttpRequest(); xhr.responseType = "arraybuffer"; xhr.open("POST", url, true); xhr.onload = function () { const blob = new Blob([this.response], {type:"application/vnd.ms-excel"}); if(blob.size < 1) { alert('导出失败,导出的内容为空!'); return; } if(window.navigator.msSaveOrOpenBlob) { navigator.msSaveOrOpenBlob(blob, 'test.xls') } else { const aLink = document.createElement('a'); aLink.style.display = 'none'; aLink.href = window.URL.createObjectURL(blob); aLink.download = 'testxls'; document.body.appendChild(aLink); aLink.click(); document.body.removeChild(aLink); return; } } xhr.setRequestHeader("Authorization", "xxx"); xhr.setRequestHeader("Content-Type", "application/json"); xhr.send(JSON.stringify(queryParams));
测试结果
下载的excel不再乱码,原生ajax中使用 “arraybuffer” 使用是生效的。
总结
“arraybuffer” 这个参数导致的excel导出乱码,在原生的ajax中设置是有效的,在jquery的ajax中暂时还没找到生效的方式。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路:年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减:亲亲环节没了!
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]