使用 XMLHttpRequest 提示文件下载

Prompt file download with XMLHttpRequest(使用 XMLHttpRequest 提示文件下载)
本文介绍了使用 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

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 提示文件下载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)