利用ajax實現excel報表導出【解決亂碼問題】，供大家參考，具體內容如下
背景
項目中遇到一個場景，要導出一個excel報表。由于需要token驗證，所以不能用a標簽；由于頁面復雜，所以不能使用表單提交。初步考慮前端使用ajax，后端返回流，定義指定的header。
第一版
主要代碼
前端
使用jquery的ajax
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
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請自行百度)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
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。后端未變動。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
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中暫時還沒找到生效的方式。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qq_32799555/article/details/107319188
