使用blob從ajax結果下載文件

Question

我使用此代碼從服務器下載excel文件。

$.ajax({ 
    headers: CLIENT.authorize(), 
    url: '/server/url', 
    type: 'POST', 
    contentType: "application/json; charset=utf-8", 
    data: JSON.stringify(jsonData), 
    success: function (data) { 
     alert('Data size: ' + data.length); 
     var blob = new Blob([data], { type: "application/vnd.ms-excel" }); 
     alert('BLOB SIZE: ' + data.length); 
     var URL = window.URL || window.webkitURL; 
     var downloadUrl = URL.createObjectURL(blob); 
     document.location = downloadUrl; 
    }, 
}); 

的問題，我的經驗是，即使數據和斑點大小是相同的，那一刻document.location被分配提示我下載almoste兩次較大的Excel文件。當我嘗試打開它時，excel抱怨錯誤的文件格式，打開的文件包含大量垃圾，即使所需的文本仍然存在。

任何想法是什麼導致這一點，以及如何避免它？

Answer 1

所以我使用AJAX 2解決了這個問題。它本機支持二進制流。你不能使用jQuery，除非你base64編碼的一切，顯然。

工作的代碼如下所示：

var xhr = new XMLHttpRequest(); 
xhr.open('POST', '/le/url', true); 
xhr.responseType = 'blob'; 
$.each(SERVER.authorization(), function(k, v) { 
    xhr.setRequestHeader(k, v); 
}); 
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8'); 
xhr.onload = function(e) { 
    preloader.modal('hide'); 
    if (this.status == 200) { 
     var blob = new Blob([this.response], {type: 'application/vnd.ms-excel'}); 
     var downloadUrl = URL.createObjectURL(blob); 
     var a = document.createElement("a"); 
     a.href = downloadUrl; 
     a.download = "data.xls"; 
     document.body.appendChild(a); 
     a.click(); 
    } else { 
     alert('Unable to download excel.') 
    } 
}; 
xhr.send(JSON.stringify(jsonData)); 

希望這有助於。