Question

所以我在一个需要打电话给服务器的网站上工作并返回一个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()的方法;检查a元素是否具有download属性，如果为true，则将download属性设置为objectURL;否则，请将window.open()与objectURL响应

的参数Blob一起使用

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")

使用fork

的jquery-ajax-blob-arraybuffer.js的jQuery版本

/**
 *
 * jquery.binarytransport.js
 *
 * @description. jQuery ajax transport for making binary data type requests.
 * @version 1.0 
 * @author Henry Algus <henryalgus@gmail.com>
 *
 */

// 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");

只需下载它，全部

您可以使用<a>元素，download属性

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

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

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

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

Answer 2

我最终使用了 fetch api。对我来说，它更清楚发生了什么：

fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(dwnloadModel)
        })
            .then((response) => {
                    response.blob().then((blob) => {
                    const downloadUrl = window.URL.createObjectURL(blob);
                    const link = document.createElement('a');
                    link.setAttribute('href', downloadUrl);
                    link.setAttribute('download', 'file');
                    link.style.display = 'none';
                    document.body.appendChild(link);
                    link.click();
                    window.URL.revokeObjectURL(link.href);
                    document.body.removeChild(link);
                })
            });

我基本上从我的响应中取出 blob 并将其放入 url，然后我将其作为“a”标记附加到 dom 并通过 js 单击它。单击后，我会清理 a 标签并撤销 url。对我来说很好用。

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

2 个答案: