Explication détaillée de la mise en œuvre ajax de l'exportation de rapports Excel

Utilisez ajax pour exporter des rapports Excel [résoudre le problème tronqué], pour votre référence, le contenu spécifique 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é.

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

Première édition

Code principal

Front-end

Utilisation de l'ajax de jquery

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

Utilisation d'easypoi (veuillez vous demander comment pour utiliser 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();
   
 ......
 
}

Résultats des tests

Excel peut être exporté normalement, mais l'Excel téléchargé est tout 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.

Résumé

"arraybuffer" Ce paramètre provoque un code tronqué lors de l'exportation Excel. Il est efficace lorsqu'il est défini en ajax natif. Il n'a pas encore été trouvé efficace dans jquery. façon ajax.

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!