推薦(免費):ajax影片教學
利用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全是亂碼。經過各種找答案,整理了一下可能是以下原因導致:
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中暫時還沒找到生效的方式。
#
以上是詳解ajax實現excel報表匯出的詳細內容。更多資訊請關注PHP中文網其他相關文章!