需求說明:
點擊導出按鈕,導出當前表格的數據,並下載到本地。
(我:由於頁面判斷比較多,前端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數據。