javascript - 通过 jquery ajax post 下载文件

Question

我正在尝试导出我的网页数据并将其下载为 excel 文件。但是即使响应返回成功，下载也不会开始。

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

responseText 是这样的:

PK�J;F xl/theme/theme1.xml�YOo�6����,[r��n;v��i����#-��kJH:��oC{ 0X7��2��mZ����d����u@��(٦b:M��������{|��^��0t @��*"w$��!0I��[����n��i��'����iH�� g��,��|��J�� !����hRh��h��?r&��L � ������v@�� ��#��׮�� "����}��Жt%��hR��t"������+�� �������� u{���0K��y�9OT WywkAͯ� ����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 中设置了几个 header 。如果您使用其他编程语言，则需要相应地设置它们。

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

由于我这里下载的是xls(excel)，所以我把contentType调整为上面的。您需要根据您的文件类型进行设置。