Comment exporter un rapport Excel avec ajax

[Articles connexes recommandés : Tutoriel vidéo ajax]

Utiliser ajax pour exporter des rapports Excel [résoudre le problème des caractères tronqués], pour votre référence, spécifique Le contenu est le suivant

Contexte

J'ai rencontré un scénario dans le projet où je devais exporter un rapport Excel. Étant donné que la vérification du jeton est requise, la balise a ne peut pas être utilisée car la page est complexe, la soumission de formulaire ne peut pas être utilisée ; Il est initialement envisagé d'utiliser ajax sur le front-end, de renvoyer le flux sur le back-end et de définir l'en-tête spécifié.

Première version

Code principal

Front-end

Utiliser jquery L'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

utilise easypoi (comment utiliser easypoi s'il vous plaît 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();
   
 ......
 
}

Résultats des tests

Excel peut l'exportation est normale, mais l'Excel téléchargé est entièrement tronqué. Après avoir cherché des réponses, j'ai trié les raisons possibles :

1. Le jeu de caractères n'est pas défini sur le backend, ou le jeu de caractères est défini de manière uniforme dans le filtre du framework Spring
2. Le front-end La page ne définit pas l'encodage du jeu de caractères ;
3 Vous devez ajouter request.responseType = "arraybuffer" en ajax

Après des tests continus, le mien devrait être provoqué ; par le troisième point. Mais cela ne fonctionne toujours pas après l'avoir ajouté dans jquery ajax, et le problème de code tronqué ne peut pas être résolu.

Deuxième version

Code principal

Front-end, utilisant ajax natif. Le back-end est inchangé.

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));

Résultats des tests

L'excel téléchargé n'est plus tronqué, et l'utilisation de "arraybuffer" en ajax natif est efficace.

Recommandations d'apprentissage associées : Tutoriel vidéo js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!