使用blob从ajax结果下载文件

我使用此代码从服务器下载excel文件。使用blob从ajax结果下载文件

$.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抱怨错误的文件格式，打开的文件包含大量垃圾，即使所需的文本仍然存在。

任何想法是什么导致这一点，以及如何避免它？

来源

2015-04-01 SMart

我不认为这是一个好主意。为什么不让服务器将文件推送到浏览器以获得正常的下载流。这看起来非常不自然，除非你有一个非常具体的理由来做这件事，比如某种代理或者在线分析，但是它只是鞭策浏览器memeory。 – ppumkin 2015-04-01 14:36:34

尝试设置内容类型为'arrayBuffer' – levi 2015-04-01 14:50:41

@ppumkin，不幸的是我需要满足要求。我无法在服务器上存储文件，我需要通过授权标题才能获取文件。 – SMart 2015-04-01 15:00:33

所以我使用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));

希望这有助于。

来源

2015-04-10 08:11:24 SMart

适用于铬/ ff。对于IE，使用msSaveOrOpenBlob http://stackoverflow.com/questions/24007073/open-links-made-by-createobjecturl-in-ie11 – user2827377 2015-10-31 23:58:00

这工作..我已经在Chrome上测试..在Safari它不:( – vasanth 2016-10-20 22:35:04

+1 [this.response]如何获得blob实际上，我正在尝试像这样window.URL.createObjectURL（xhttp.response） – 2017-06-20 17:01:47

使用blob从ajax结果下载文件

回答

相关问题