Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Ajax-Implementierung des Excel-Berichtexports
Empfohlen (kostenlos): Ajax-Video-Tutorial
Ajax zum Exportieren von Excel-Berichten verwenden [das verstümmelte Problem lösen], als Referenz lautet der spezifische Inhalt wie folgt:
Hintergrund
Im Projekt ist ein Szenario aufgetreten, in dem Sie einen Excel-Bericht exportieren möchten. Da eine Token-Überprüfung erforderlich ist, kann das Tag a nicht verwendet werden. Da die Seite komplex ist, kann die Formularübermittlung nicht verwendet werden. Zunächst wird überlegt, Ajax am Frontend zu verwenden, den Stream am Backend zurückzugeben und den angegebenen Header zu definieren.
Erste Version
Hauptcode
Front-End
Mit jquerys 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); } } });
Backend
Mit easypoi (wie verwende ich bitte easypoi. Baidu)
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(); ...... }
Testergebnis
Excel kann normal exportiert werden, aber das heruntergeladene Excel ist völlig verstümmelt. Nach mehreren Suchen nach Antworten habe ich die möglichen Gründe herausgefunden:
1 Der Zeichensatz ist nicht im Backend festgelegt, oder der Zeichensatz ist im Filter des Spring-Frameworks einheitlich festgelegt nicht auf der Front-End-Seite festgelegt ;
3. Sie müssen request.responseType = "arraybuffer" in Ajax hinzufügen;
Zweite Version
Hauptcode
Frontend, mit nativem Ajax. Das Backend ist unverändert.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));
Testergebnisse
Das heruntergeladene Excel ist nicht mehr verstümmelt und die Verwendung von „arraybuffer“ in nativem Ajax ist effektiv.Zusammenfassung
„Arraybuffer“ Dieser Parameter führt dazu, dass der Excel-Export verstümmelten Codes entspricht. Die Einstellung in nativem Ajax ist jedoch nicht wirksam.Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Ajax-Implementierung des Excel-Berichtexports. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!