Ausführliche Erläuterung der Ajax-Implementierung des Excel-Berichtexports

Verwenden Sie Ajax, um Excel-Berichte zu exportieren [lösen Sie das verstümmelte Problem]. Als Referenz lautet der spezifische Inhalt wie folgt

Hintergrund

Ich bin im Projekt auf ein Szenario gestoßen, in dem ich einen Excel-Bericht exportieren musste. 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.

Verwandte Lernempfehlungen: Javascript-Video-Tutorial

Erste Ausgabe

Hauptcode

Front-End

Verwendung von 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);
  }
 }
});

Back-End

Verwendung von easypoi (bitte fragen Sie sich, wie um easypoi Baidu zu verwenden)

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();
   
 ......
 
}

Testergebnisse

Excel kann normal exportiert werden, aber das heruntergeladene Excel ist völlig verstümmelt. Nachdem ich nach Antworten gesucht habe, 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.
2. Das Frontend Die Seite legt die Zeichensatzkodierung nicht fest.
3. Sie müssen request.responseType = "arraybuffer" in Ajax hinzufügen bis zum dritten Punkt. 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 zu verstümmeltem Excel-Export. Er ist wirksam, wenn er in nativem Ajax festgelegt wird. Es wurde noch nicht festgestellt, dass er in JQuery wirksam ist Ajax-Weg.

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!