So exportieren Sie einen Excel-Bericht mit Ajax

【Empfohlene verwandte Artikel: Ajax-Video-Tutorial】

Verwenden von Ajax zum Exportieren von Excel-Berichten [das verstümmelte Problem lösen], als Referenz lautet der spezifische Inhalt wie folgt

Hintergrund

Ich bin auf einen gestoßen Szene im Projekt, Sie möchten einen Excel-Bericht exportieren. 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.

Verwandte Lernempfehlungen:

js-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo exportieren Sie einen Excel-Bericht mit Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!