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(&#39;导出失败，导出的内容为空！&#39;);
   return
  }
  if(window.navigator.msSaveOrOpenBlob) {
   navigator.msSaveOrOpenBlob(blob, &#39;test.xls&#39;)
  } else {
   const aLink = document.createElement(&#39;a&#39;);
   aLink.style.display = &#39;none&#39;;
   aLink.href = window.URL.createObjectURL(blob);
   aLink.download = &#39;test.xls&#39;;
   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;

Nach kontinuierlichen Tests sollte meins durch den dritten Punkt verursacht werden. Aber es funktioniert immer noch nicht, nachdem es in JQuery Ajax hinzugefügt wurde, und das Problem mit dem verstümmelten Code kann nicht gelöst werden.

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(&#39;导出失败，导出的内容为空！&#39;);
  return;
 }
 if(window.navigator.msSaveOrOpenBlob) {
  navigator.msSaveOrOpenBlob(blob, &#39;test.xls&#39;)
 } else {
  const aLink = document.createElement(&#39;a&#39;);
  aLink.style.display = &#39;none&#39;;
  aLink.href = window.URL.createObjectURL(blob);
  aLink.download = &#39;testxls&#39;;
  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!