我已经实现了以下代码:
我有一个像这样的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
请求的响应用于下载直接流式传输给用户(content-type: application/octet-stream)
的图像存档。如何使用jQuery
?
答案 0 :(得分:2)
您需要从数据Blob创建一个网址,并将其添加到href并触发点击。
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;
};
})();
因此,此函数将获取您的数据并执行这两个步骤,您可以使用以下内容:
$.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。