问题描述
我知道 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的隐藏表单代码>
You could download file by window.open()
in separate tab, if it was not POST request. Here it was suggested to use a hidden form with target=_blank
这篇关于使用 XMLHttpRequest 提示文件下载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!