Télécharger le stream d’octets via jQuery

J’ai implémenté le code suivant:

J’ai un bouton HTML comme celui-ci:

HTML

 

La fonction downCont() appelée au clic est un ajax POST comme celui-ci:

JQuery

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

Maintenant, la réponse de cette demande POST est utilisée pour télécharger une archive d’images directement transmise à l’utilisateur (content-type: application/octet-stream) . Comment puis-je déclencher le téléchargement de l’archive par le navigateur lui-même à l’aide de jQuery ?

Vous devez créer une URL à partir d’un blob de données, l’append à un href et déclencher un clic.

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

Donc, cette fonction va prendre vos données et effectuer ces deux étapes, et vous pouvez l’utiliser comme ceci:

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

Notez que pour les navigateurs obsolètes qui ne prennent pas en charge les objects Blobs, il existe également un autre moyen de le faire avec window.open utilisant une chaîne de données codée en base64. Notez également que la fonction que j’ai fournie utilise les fonctions de flèche et les arguments par défaut, mais il est facile de l’ES5’ify si vous le souhaitez.