处理文件下载从ajax张贴

我有一个javascript应用程序，发送ajax POST请求到某个URL。Response可以是JSON字符串，也可以是文件(作为附件)。我可以很容易地在ajax调用中检测到Content-Type和Content-Disposition，但是一旦我检测到响应包含一个文件，我如何让客户端下载它呢?我在这里读过一些类似的帖子，但没有一个能提供我想要的答案。

请，请，请不要发布建议我不应该使用ajax或我应该重定向浏览器的答案，因为这些都不是一个选项。使用普通的HTML表单也是不可行的。我所需要的是向客户端显示一个下载对话框。这能做到吗?如何做到?

当前回答

我也遇到过同样的问题，并成功地解决了它。我的用例是这样的。

“将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以上。您需要根据您的文件类型设置它。您可以使用这种技术下载任何类型的文件。

2016-07-04 07:56:04

其他回答

还有另一种解决方案下载ajax网页。但我指的是必须首先处理然后下载的页面。

首先，您需要将页面处理与结果下载分离。

1) ajax调用中只进行页面计算。

$.post("CalculusPage.php", { calculusFunction: true, ID: 29, data1: "a", data2: "b" },

       function(data, status) 
       {
            if (status == "success") 
            {
                /* 2) In the answer the page that uses the previous calculations is downloaded. For example, this can be a page that prints the results of a table calculated in the ajax call. */
                window.location.href = DownloadPage.php+"?ID="+29;
            }               
       }
);

// For example: in the CalculusPage.php

    if ( !empty($_POST["calculusFunction"]) ) 
    {
        $ID = $_POST["ID"];

        $query = "INSERT INTO ExamplePage (data1, data2) VALUES ('".$_POST["data1"]."', '".$_POST["data2"]."') WHERE id = ".$ID;
        ...
    }

// For example: in the DownloadPage.php

    $ID = $_GET["ID"];

    $sede = "SELECT * FROM ExamplePage WHERE id = ".$ID;
    ...

    $filename="Export_Data.xls";
    header("Content-Type: application/vnd.ms-excel");
    header("Content-Disposition: inline; filename=$filename");

    ...

我希望这个解决方案对很多人都有用，就像对我一样。

2019-05-21 15:15:55

我是这么做的 https://stackoverflow.com/a/27563953/2845977

. ajax({美元 url: ' < URL_TO_FILE >”, 成功:函数(数据){ var blob=new blob ([data]); var链接= document.createElement (' a '); link.href = window.URL.createObjectURL (blob); link.download = " < FILENAME_TO_SAVE_WITH_EXTENSION >”; link.click (); ｝ })；

使用download.js更新答案

. ajax({美元 url: ' < URL_TO_FILE >”, 成功:下载。绑定(true， "<FILENAME_TO_SAVE_WITH_EXTENSION>"， "<FILE_MIME_TYPE>") })；

2017-08-30 19:06:06

以下是我从不同渠道收集的解决方案: 服务器端实现:

    String contentType = MediaType.APPLICATION_OCTET_STREAM_VALUE;
    // Set headers
    response.setHeader("content-disposition", "attachment; filename =" + fileName);
    response.setContentType(contentType);
    // Copy file to output stream
    ServletOutputStream servletOutputStream = response.getOutputStream();
    try (InputStream inputStream = new FileInputStream(file)) {
        IOUtils.copy(inputStream, servletOutputStream);
    } finally {
        servletOutputStream.flush();
        Utils.closeQuitely(servletOutputStream);
        fileToDownload = null;
    }

客户端实现(使用jquery):

$.ajax({
type: 'POST',
contentType: 'application/json',
    url: <download file url>,
    data: JSON.stringify(postObject),
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(errorThrown);
    },
    success: function(message, textStatus, response) {
       var header = response.getResponseHeader('Content-Disposition');
       var fileName = header.split("=")[1];
       var blob = new Blob([message]);
       var link = document.createElement('a');
       link.href = window.URL.createObjectURL(blob);
       link.download = fileName;
       link.click();
    }
});

2019-03-13 09:38:35

正如其他人所述，您可以通过POST请求创建并提交表单来下载。但是，您不必手动执行此操作。

有一个非常简单的库可以做到这一点，那就是jquery.redirect。它提供了一个类似于标准jQuery的API。post方法:

$.redirect(url, [values, [method, [target]]])

2015-07-22 20:29:31