ExcelレポートエクスポートのAjax実装の詳細説明

ajax を使って Excel レポートをエクスポートする【文字化け問題を解決】 参考までに、具体的な内容は以下の通りです

背景

プロジェクトで Excel レポートをエクスポートする必要があるシナリオに遭遇しました。トークン検証が必要なためaタグは使用できず、ページが複雑なためフォーム送信は使用できません。最初は、フロントエンドで ajax を使用し、バックエンドでストリームを返し、指定されたヘッダーを定義することが考えられます。

関連する学習に関する推奨事項: JavaScript ビデオ チュートリアル

初版

# #メインコード

フロントエンド

jqueryの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);
  }
 }
});

バックエンド

easypoiを使用(方法はご自身でご確認ください) 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();
   
 ......
 
}

テスト結果

excelは正常にエクスポートできるのですが、ダウンロードしたexcelがすべて文字化けしてしまいました。答えを探した結果、考えられる原因を整理しました:

1. バックエンドで文字セットが設定されていない、または Spring Framework のフィルターで文字セットが一律に設定されている;

2フロントエンド 文字セットエンコーディングがページに設定されていません;
3. ajax に request.responseType = "arraybuffer" を追加する必要があります;

継続的なテストの後、私のものは次のようになります。 3番目の点が原因です。しかし、jquery ajaxに追加してもまだ機能せず、コード化けの問題は解決できません。

第 2 版

メイン コード

ネイティブ Ajax を使用するフロント エンド。バックエンドは変更されていません。

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

テスト結果

ダウンロードしたExcelの文字化けはなくなり、ネイティブAjaxの「arraybuffer」の使用が効果的です。

概要

"arraybuffer" このパラメータにより、Excel で文字化けがエクスポートされます。ネイティブ Ajax での設定は有効ですが、Ajax では有効であることがまだ確認されていません。 jqueryのajaxのやり方。

以上がExcelレポートエクスポートのAjax実装の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。