使用XMLHttpRequest提示文件下载 [英] Prompt file download with XMLHttpRequest

问题描述

我知道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（）
返回响应
  

我已经搜索了几个小时，现在没有找到一个正确的例子，如何使用XMLHttpRequests。我不想使用POST操作创建一个正确的HTML表单，因为表单数据相当大，并且动态创建。

上面的代码有问题？我失踪了我不知道如何将数据实际发送给客户端作为下载。

解决方案

XHR请求不会触发文件下载。我找不到明确的要求，但是 XMLHttpRequest上的W3C文档没有描述任何特殊的对内容处理的反应=附件响应

如果不是POST请求，您可以通过window.open（）在单独的选项卡中下载文件。 这里建议使用隐藏的表单与target = _blank

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

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

Here's what I've tried:

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);

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

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.

解决方案

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

You could download file by window.open() in separate tab, if it was not POST request. Here it was suggested to use hidden form with target=_blank

这篇关于使用XMLHttpRequest提示文件下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！