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.