Download octet stream through jQuery

Question

I have executed the following code:

I have an html button:

HTML

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

The function downCont()called when clicked is ajax POSTas follows:

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!");
            });
        });

Now the response to this request is POSTused to download the image archive, which is transmitted directly to the user (content-type: application/octet-stream). How can I initiate an archive download using the browser itself using jQuery?

Answer 1

You need to create a URL from Blob data and add it to href and trigger a click.

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);
    }

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

So this function will take your data and complete these two steps, and you can use it something like this:

$.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'));

, , Blobs, window.open base64. , , , , ES5' , .