Java利用POI導出Excel,利用POST請求傳JSON參數

需求說明:

點擊導出按鈕,導出當前表格的數據,並下載到本地。
(我:由於頁面判斷比較多,前端js進行了處理,已經將數據查詢結果整理到表格,爲了防止後端再次查詢,決定將數據(json數據)直接傳到後端,變成Excel輸出出來,進行下載。)

偶遇兩座大山

第一座大山:亂碼

利用Ajax實現的,按照想法就可以搞定了,然後最後出現的問題是,後端已經將Excel輸出流返回到前端,但是ajax卻無法接受這種流,在返回的response中顯示的是亂碼,


 var text = JSON.stringify(data); 
 $.ajax({
      type:'POST',
      url:  "http://www.buyfree.cc/xxxxxxxx/" ,
      data: {"text": text},
      success: function(response) {
          var $a = $("<a>");
          $a.attr("href", response.data.file);
          $a.attr("download", response.data.filename);
          $("body").append($a);
          $a[0].click();
          $a.remove();
      }
  });

data 爲之前js處理後的表格數據,格式爲Object數組,後轉成json數據,如圖
在這裏插入圖片描述
response:請求成功後的返回亂碼,程序執行到success內就報錯了,但是響應成功是1000%的。
在這裏插入圖片描述
以上這種情況,我百度了好久,最後發現了一位犯了一模一樣錯的人,可以看一下他的帖子,他是GET請求,最後換了一種方式,解決了。(地址:https://blog.csdn.net/qq_38455201/article/details/80267989)

讀了他最後一段話“文件的下載是以二進制的形式讀取的,而ajax的請求是字符型的請求,所以沒有辦法實現下載,最後只能拋棄ajax的方法”,然後也拋棄了ajax,換成了JS原生寫法。

第二座大山:參數爲空

爲什麼要換原生寫法?也是百度了很久,發現有人這樣寫,然後借鑑了一下,結果出現第二座大山,是後端收不到我傳遞的JSON數據,一直是NULL,
在這裏插入圖片描述
請教了不少人,也沒有解決,說了大致兩種方案:第一,切換成get請求,第二使用剛剛第一種方法將數據傳遞過去,將生成的Excel保存到服務器,返回下載鏈接,通過前端轉跳,來下載服務器文件。(下面代碼爲錯誤代碼)

var text = JSON.stringify(data);
var url = "http://www.buyfree.cc/xxxxxxxx/" ;
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
// 返回類型blob
xhr.responseType = "blob";  
xhr.setRequestHeader("Content-type", "application/json");
xhr.onload = function () {
     if (this.status === 200) {
         var blob = this.response;
         var reader = new FileReader();
         reader.readAsDataURL(blob); 
         reader.onload = function (e) {
             var a = document.createElement('a');
             a.download = '下載文件xx.xlsx';
             a.href = e.target.result;
             $("body").append(a); 
             a.click();
             $(a).remove();
         }
     }
 };
 // 發送ajax請求
 var content ="text=" +text;
 xhr.send(content);

想來想去兩種方案都不適合我,然後繼續百度來解決這個傳值json問題,時間比較漫長,有點像“發明燈泡”,看見能用的就試下,最後,成功了!!!!!(代碼如下)

var text = JSON.stringify(data);
var url = "http://www.buyfree.cc/xxxxxxxx/" ;
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
// 返回類型blob
xhr.responseType = "blob";  
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xhr.onload = function () {
     if (this.status === 200) {
         var blob = this.response;
         var reader = new FileReader();
         reader.readAsDataURL(blob); 
         reader.onload = function (e) {
             var a = document.createElement('a');
             a.download = '下載文件xx.xlsx';
             a.href = e.target.result;
             $("body").append(a); 
             a.click();
             $(a).remove();
         }
     }
 };
 // 發送ajax請求
 var content ="text=" +text;
 xhr.send(content);

相比較之前的代碼就換了一句話xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
這句話,幫我翻越了兩座大山。我也不知道這屬於什麼類型的問題。使用這個方法,可以實現Excel下載,而且還是post請求,而且還是傳JSON數據。

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章