如何通过ajax发布请求下载作为django响应的zip文件？答案

【问题标题】：How to download zip file coming as django response through ajax post request?如何通过ajax发布请求下载作为django响应的zip文件？
【发布时间】：2021-10-02 10:24:49
【问题描述】：

所以，在我的 ajax 发布请求之后，我的 Django 视图返回一个 zip 文件作为响应。我想在收到回复后立即下载该 zip 文件。但我不知道该怎么办。我经历了很多答案，但对我没有用。现在正在下载 zip 文件，但是当我打开它时它已损坏。我的 Django 响应 zip 文件类型是。

发布请求的 Ajax 代码

function upload(url) {
    let pdf_file = $('#file_input').get(0).files[0];
    let form_data = new FormData();
    form_data.append("file", pdf_file);
    jQuery.ajax({
        url: url,
        type: "POST",
        data: form_data,
        enctype: 'multipart/form-data',
        contentType: false,
        processData: false,
        success: function (response) {
            var binaryData = [];
            binaryData.push(response);
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(new Blob(binaryData, {type: "application/zip"}))
            link.download = 'sample.zip';
            document.body.appendChild(link);
            link.click();
            
        },
        error: function (response) {
            loading_btn.classList.add("d-none");
            upload_btn.classList.remove("d-none");
        }
    });
}

ajax 响应

Django 视图

@csrf_exempt
def upload_file(request):
    if request.is_ajax() and request.method == 'POST':
        zip_file = open('/home/deftbox/PycharmProjects/pdf_data_Extractor/test.zip', 'rb')
        return FileResponse(zip_file)

压缩下载后，当我打开我的 zip 文件时出现错误 **加载存档时出错。 *

打开 zip 文件时出错

【问题讨论】：

stackoverflow.com/questions/4545311/…
@AlexParamonov 感谢您的推荐，但我更新了我的问题，您能再检查一下吗？
获取原始 /home/deftbox/PycharmProjects/pdf_data_Extractor/test.zip 文件和下载后获得的文件，并在二进制差异工具中进行比较。他们应该是一样的。如果现在 - 看看可能有一些垃圾或文本添加到您的 zip 文件的开头或结尾。打开原始文件也有意义，也许原始文件也坏了:)只是为了确保。

标签： javascript python django ajax zip

【解决方案1】：

如果您想使用 jQuery.ajax 下载（二进制）文件，您必须使用 xhrFields 设置二进制 responseType

function upload(url) {
    let pdf_file = $('#file_input').get(0).files[0];
    let form_data = new FormData();
    form_data.append("file", pdf_file);
    jQuery.ajax({
        url: url,
        type: "POST",
        data: form_data,
        contentType: false,
        processData: false,
        xhrFields:{
            responseType: 'blob'
        },
        success: function (response) {
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(response)
            link.download = 'sample.zip';
            document.body.appendChild(link);
            link.click();
            
        },
        error: function (response) {
            loading_btn.classList.add("d-none");
            upload_btn.classList.remove("d-none");
        }
    });
}

【讨论】：