Wie exportiere ich Excel-Berichte mit AJAX?

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.

Erste Version

Hauptcode

Frontend

Jquery verwenden Das 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

verwendet easypoi (wie man easypoi bitte verwendet, 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();
   
 ......
 
}

Testergebnisse

Excel kann das Der Export ist normal, 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.

Empfohlenes Tutorial: „

PHP

“

Das obige ist der detaillierte Inhalt vonWie exportiere ich Excel-Berichte mit AJAX?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!