使用 XMLHttpRequest 提示文件下载

问题描述

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

I'm aware that jQuery's ajax method cannot handle downloads, and I do not want to add a jQuery plugin to do this.

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

I want to know how to send POST data with XMLHttpRequest to download a file.

这是我尝试过的:

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 后端:

I'm working with Django, and the file appears to be sending back to the client successfully. In the network tab in Chrome, I can see gibberish in the preview tab (which I expect). But I want to send back a zip file, not a text representation of the zip file. Here's the Django back end:

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 表单，因为表单数据相当大，并且是动态创建的.

I've searched this for hours now without finding a proper example on how to do this with XMLHttpRequests. I don't want to create a proper html form with a POST action because the form data is rather large, and dynamically created.

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

Is there something wrong with the above code? Something I'm missing? I just don't know how to actually send the data to the client as a download.

推荐答案

UPDATE:自从引入 Blob API.详情请参考 Steven 的回答.

UPDATE: this answer is not accurate anymore since the introduction of Blob API. Please refer to Steven's answer for details.

原始答案:

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

XHR request will not trigger file download. I can't find explicit requirement, but W3C doc on XMLHttpRequest doesn't describe any special reaction on content-disposition=attachment responses either

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