jquery - 通过 jQuery 下载八位字节流

Question

我已经实现了以下代码:

我有一个像这样的 html 按钮:

HTML

<button style="background-color: #f39900;" onclick="downCont()">
    Download all content
</button>

点击时调用的 downCont() 函数是一个 ajax POST，如下所示:

JQuery

var downCont = function() {
          $.ajax({
              method: "POST",
              contentType: "application/x-www-form-urlencoded",
              url: "<endpoint here>",
              data: {
                "tokenId": token,
                "downloadId": "cz98567354",
                "saveAs": "AllContents"
              }
            })
            .done(function() {
              alert("I have downloaded all contents!");
            });
        });

现在，此 POST 请求的响应用于下载图像存档，该存档将直接流式传输给用户(内容类型:application/octet-stream)。如何使用 jQuery 触发浏览器本身下载存档？

Answer 1

您需要从数据 Blob 创建一个 url ，并将其添加到 href 并触发点击。

let url;

const saveData = (() => {
  const a = document.createElement('a');
  a.style = 'display: none';
  document.body.appendChild(a);

  return (data, fileName, type = 'octet/stream') => {
    const blob = new Blob([data], { type });

    if (navigator.msSaveBlob) {
      return navigator.msSaveBlob(blob, fileName);
    }

    if (url) {
      // Keep at most 1 blob around by removing the last used one.
      URL.revokeObjectURL(url);
    }

    url = URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
    return true;
  };
})();

因此这个函数将获取您的数据并执行这两个步骤，您可以像这样使用它:

$.ajax({
  method: "POST",
  contentType: "application/x-www-form-urlencoded",
  url: "<endpoint here>",
  data: {
    "tokenId": token,
    "downloadId": "cz98567354",
    "saveAs": "AllContents"
  }
})
.done((data) => saveData(data, 'myDownload.zip'));

请注意，对于不支持 Blob 的过时浏览器，还有另一种方法可以使用 base64 编码的数据字符串通过 window.open 来实现此目的。另请注意，我提供的函数使用箭头函数和默认参数，但如果您愿意，可以很容易地对其进行 ES5 化。