通过jquery ajax post下载文件

Question

我正在尝试导出我的网页数据并将其下载为excel文件.但即使响应返回成功,下载也不会启动.

$.ajax({
      type: "POST",
      url: _url,
      contentType: 'multipart/form-data;boundary=SzB12x',
      data: json,
    });

responseText是这样的:

PKJ; FXL /主题/ theme1.xmlYOo6 ,[RN; 6#-kJH:OC {0 X7?2MZ ???d??u@?(?b:M???? {| ^ 0t@ *"w $ !0I [ n i ' iH g , | J ! hRh h ？r& L ߶S v@ # ׮ " } Жt% hR t" + u{ނ 0K oy 9OTWywkAͯ ͯ F 6* [ U

我认为它的文件,但我无法下载它!

有什么帮助吗？

谢谢!

Answer 1

我遇到了同样的问题并成功解决了它.我的用例是这样的.

• 将JSON数据发布到服务器并接收excel文件.
• 该excel文件是即时创建的,并作为对客户端的响应返回.

码:

$("#my-button").on("click", function() {
    // Data to post
    data = {
        ids: [1, 2, 3, 4, 5]
    };

    // Use XMLHttpRequest instead of Jquery $ajax
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        var a;
        if (xhttp.readyState === 4 && xhttp.status === 200) {
            // Trick for making downloadable link
            a = document.createElement('a');
            a.href = window.URL.createObjectURL(xhttp.response);
            // Give filename you wish to download
            a.download = "test-file.xls";
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();
        }
    };
    // Post data to URL which handles post request
    xhttp.open("POST", excelDownloadUrl);
    xhttp.setRequestHeader("Content-Type", "application/json");
    // You should set responseType as blob for binary responses
    xhttp.responseType = 'blob';
    xhttp.send(JSON.stringify(data));
});

上面的代码片段正在执行以下操作

• 使用XMLHttpRequest将数组作为JSON发布到服务器
• 在将内容作为blob(二进制)获取后,我们创建了一个可下载的URL并将其附加到不可见的"a"链接,然后单击它.

在这里,我们需要在服务器端仔细设置一些东西.我在Python Django HttpResponse中设置了几个标题.如果您使用其他编程语言,则需要相应地设置它们.

# In python django code
response = HttpResponse(file_content, content_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")

由于我在这里下载xls(excel),我将contentType调整为高于1.您需要根据文件类型进行设置.

Answer 2

尝试使用隐藏表单提交请求.

当用户提交HTML表单时,用户输入表单的所有数据都将作为GET或POST请求发送到FORM的"ACTION"属性中指定的URL.

 <FORM action="http://www.labnol.org/sendmail.php" method="post">
 ...form contents...
 </FORM>

在上面的示例中,在表单提交时向sendmail.php脚本发出HTTP POST请求.您可以将target ="_ blank"添加到FORM标记以在新窗口中处理请求.

但是,如果您想在后台页面上提交FORM而不将浏览器指向另一个页面(document.location.href更改表单提交),您有两个选择:

选项1.您可以在HTML页面中创建一个不可见的IFRAME,并将其设置为原始FORM的目标.这将提交表单但不重新加载父窗口.

<FORM action="http://example.com/script.php" 
           method="POST" target="hidden-form">
 ...form contents... 
 </FORM>
<IFRAME style="display:none" name="hidden-form"></IFRAME> 

选项#2:还有另一种方法可以在提交表单之前创建自定义有效负载.与基于IFRAME的表单提交不同,以下代码生成标准表单提交请求,因此您的浏览器位置将更改,并且当前页面将添加到浏览器历史记录中.图片来源:Rakesh Pai.

submitFORM('http://example.com/script.php', 'POST',
    {'name':'digital+inspiration', 'age':'100', 'sex','M'});

function submitFORM(path, params, method) {
    method = method || "post"; 

    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    //Move the submit function to another variable
    //so that it doesn't get overwritten.
    form._submit_function_ = form.submit;

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }

    document.body.appendChild(form);
    form._submit_function_();
}

在此链接中,您可以找到创建隐藏表单并提交的方法.

请享用!!

Answer 3

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: yoururlpath,
    success: function (response) {
        var file = fileName+".xlsx";
        window.location = "someFilePath?file=" + file;
    }
});