使用 XMLHttpRequest 提示下载文件

Question

我知道 jQuery 的 ajax 方法无法处理下载，我不想添加 jQuery 插件来执行此操作。

我想知道如何使用 XMLHttpRequest 发送 POST 数据来下载文件。

这是我尝试过的：

var postData = new FormData();
postData.append('cells', JSON.stringify(output));

var xhr = new XMLHttpRequest();
xhr.open('POST', '/export/', true);
xhr.setRequestHeader("X-CSRFToken", csrftoken);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
    console.log(e);
    console.log(xhr);
}
xhr.send(postData);

我正在使用 Django，并且文件似乎已成功发送回客户端。在 Chrome 的网络选项卡中，我可以在预览选项卡中看到乱码（这是我所期望的）。但我想发回一个 zip 文件，而不是 zip 文件的文本表示。这是 Django 后端：

wrapper = FileWrapper(tmp_file)
response = HttpResponse(wrapper, content_type='application/zip')
response['Content-Disposition'] = "attachment; filename=export.zip"
response['Content-Length'] = tmp_file.tell()
return response

我已经搜索了好几个小时，但没有找到关于如何使用 XMLHttpRequests 执行此操作的适当示例。我不想使用 POST 操作创建正确的 html 表单，因为表单数据相当大，并且是动态创建的。

上面的代码有问题吗？我错过了什么？我只是不知道如何实际将数据作为下载发送到客户端。

Answer 1

如果您在发送请求之前将XMLHttpRequest.responseType 属性设置为'blob'，那么当您返回响应时，它将被表示为一个blob。然后，您可以将 blob 保存到一个临时文件并导航到它。

var postData = new FormData();
postData.append('cells', JSON.stringify(output));

var xhr = new XMLHttpRequest();
xhr.open('POST', '/export/', true);
xhr.setRequestHeader('X-CSRFToken', csrftoken);
xhr.responseType = 'blob';
xhr.onload = function (e) {
    var blob = e.currentTarget.response;
    var contentDispo = e.currentTarget.getResponseHeader('Content-Disposition');
    // https://stackoverflow.com/a/23054920/
    var fileName = contentDispo.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1];
    saveOrOpenBlob(blob, fileName);
}
xhr.send(postData);

这是saveOrOpenBlob的示例实现：

function saveOrOpenBlob(blob, fileName) {
    window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
    window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function (fs) {
        fs.root.getFile(fileName, { create: true }, function (fileEntry) {
            fileEntry.createWriter(function (fileWriter) {
                fileWriter.addEventListener("writeend", function () {
                    window.location = fileEntry.toURL();
                }, false);
                fileWriter.write(blob, "_blank");
            }, function () { });
        }, function () { });
    }, function () { });
}

如果您不关心让浏览器在文件是可查看文件类型时导航到该文件，那么创建一个始终直接保存到文件的方法要简单得多：

function saveBlob(blob, fileName) {
    var a = document.createElement('a');
    a.href = window.URL.createObjectURL(blob);
    a.download = fileName;
    a.dispatchEvent(new MouseEvent('click'));
}

Answer 2

更新：自引入Blob API 以来，此答案不再准确。详情请参考 Steven 的回答。

---

原始答案：

XHR 请求不会触发文件下载。我找不到明确的要求，但W3C doc on XMLHttpRequest 也没有描述对 content-disposition=attachment 响应的任何特殊反应

如果不是 POST 请求，您可以在单独的选项卡中通过 window.open() 下载文件。 Here 建议使用带有target=_blank 的隐藏表单

Answer 3

download: function(){
    var postData = new FormData();
		var xhr = new XMLHttpRequest();
		xhr.open('GET', downloadUrl, true);
		xhr.responseType = 'blob';
		xhr.onload = function (e) {
			var blob = xhr.response;
			this.saveOrOpenBlob(blob);
		}.bind(this)
		xhr.send(postData);
 }

saveOrOpenBlob: function(blob) {
		var assetRecord = this.getAssetRecord();
		var fileName = 'Test.mp4'
		var tempEl = document.createElement("a");
    	document.body.appendChild(tempEl);
    	tempEl.style = "display: none";
        url = window.URL.createObjectURL(blob);
        tempEl.href = url;
        tempEl.download = fileName;
        tempEl.click();
		window.URL.revokeObjectURL(url);
	},

试试这个对我有用。