在AJAX请求中接收Zip文件作为响应

所以我正在开发一个需要调用服务器的网站，它会返回一个zip文件，问题是我并不确定我做的一切都是正确的。 代码看起来像这样：

function download(){ if($('.download').hasClass('activeBtn')){ $.ajax({ type: 'GET', url: someUrl, contentType: 'application/zip', dataType: 'text', headers: { 'Api-Version': '3.4' } }).then(function (data) { console.log(data); //Basically prints the byte array //Here I should build the file and download it }); } } 

正如您所看到的，我需要使用响应中的字节数组来构建文件，我该怎么做？

Answer 1

一种利用XMLHttpRequest()的方法; 检查元素是否具有download属性，如果为true，则将download属性设置为objectURL ; 否则，使用带有Blob响应的参数objectURL的window.open()

 function downloadFile(url, headers, filename) { function handleFile(data) { console.log(this.response || data); var file = URL.createObjectURL(this.response || data); filename = filename || url.split("/").pop(); var a = document.createElement("a"); // if `a` element has `download` property if ("download" in a) { a.href = file; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); } else { // use `window.open()` if `download` not defined at `a` element window.open(file) } } var request = new XMLHttpRequest(); request.responseType = "blob"; request.onload = handleFile; request.open("GET", url); for (var prop in headers) { request.setRequestHeader(prop, headers[prop]); } request.send(); } downloadFile("/path/to/resource/", {"x-content": "abc"}, "filename.zip") 

使用jquery-ajax-blob-arraybuffer.js fork的jQuery版本

 /** * * jquery.binarytransport.js * * @description. jQuery ajax transport for making binary data type requests. * @version 1.0 * @author Henry Algus  * */ // use this transport for "binary" data type $.ajaxTransport("+binary", function(options, originalOptions, jqXHR){ // check for conditions and support for blob / arraybuffer response type if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob)))) ) { return { // create new XMLHttpRequest send: function(headers, callback){ // setup all variables var xhr = new XMLHttpRequest(), url = options.url, type = options.type, async = options.async || true, // blob or arraybuffer. Default is blob dataType = options.responseType || "blob", data = options.data || null, username = options.username || null, password = options.password || null; xhr.addEventListener('load', function(){ var data = {}; data[options.dataType] = xhr.response; // make callback and send data callback(xhr.status , xhr.statusText , data , xhr.getAllResponseHeaders()); }); xhr.open(type, url, async, username, password); // setup custom headers for (var i in headers ) { xhr.setRequestHeader(i, headers[i] ); } xhr.responseType = dataType; xhr.send(data); }, abort: function(){ jqXHR.abort(); } }; } }); function downloadFile(url, headers, filename) { return $.ajax({ url:url, dataType:"binary", processData: false, headers:headers }) .then(function handleFile(data) { console.log(this.response || data); var file = URL.createObjectURL(this.response || data); filename = filename || url.split("/").pop(); var a = document.createElement("a"); // if `a` element has `download` property if ("download" in a) { a.href = file; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); } else { // use `window.open()` if `download` not defined at `a` element window.open(file) } }) } downloadFile("/path/to/resource/", {"x-custom-header":"abc"}, "filename.zip"); 

---

只需要下载它，就是这样

您可以使用元素， download属性

 $("", {href: someUrl, download: "filename.zip" }).appendTo("body")[0].click() 

---

或者，使用库（例如zip.js解析文件，从文件中包含的数据创建多个或单个可下载的.zip 。

创建每个文件的objectURL，使用元素下载每个文件。

如果浏览器没有download属性，则可以使用MIME类型设置为application/octet-stream的文件对象的data URI来下载文件