javascript - JQuery ajax 表单提交返回文件给出未定义的错误响应

Question

这个问题已经有答案了:

Download pdf file using jquery ajax (5 个回答)

已关闭 4 年前。

由于文件操作安全性的各种问题，我被迫通过 Ajax post 方法调用提交请求。服务器端 URL 接收此消息并给出一个 pdf 文件作为响应。 java servlet 中的服务器端代码如下。

            ServletOutputStream out = response.getOutputStream();
        response.setContentType("application/pdf");
        response.setHeader("Content-Disposition", "attachment;filename=" + outFile);
        //create the pdf file
        response.flushBuffer();

在客户端，JavaScript 代码发送对 POST 的调用，POST 通过 doPost 调用上述代码。当通过 form.submit() 提交表单时，文件会很好地下载为 pdf 文件。当尝试通过 Ajax 调用时，它在错误部分给出了未定义的响应。客户端代码如下。

    var formData = new FormData();
//Fill formData with fields and files
    console.log('Posting form from ajax');
    $.ajax({
        url: "/createPdf",
        type: "POST",
        data: formData,
        contentType: false,
        processData: false,
        xhrFields: {
            responseType: 'blob'
        },
        success: function (response, status, xhr) {
            console.log('Processing response');
            download(response, "merged.pdf", "application/pdf" );

        },
        error: function (xhr, status, error) 
        { 
            var err = xhr.responseText; 
            alert(err); 
        }

在上面，它没有进入成功响应。它正在发生错误并警告为未定义。我在这里做错了什么。如果重要的话，我的 jquery 版本是 1.8.0.min.js 。下载功能引用http://danml.com/download.html但我也尝试了其他片段，但它甚至没有成功。

在检查工具下，我看到成功请求和响应的 blob 数据，但 blob 数据需要大约 10-15 秒才能在浏览器的网络下显示

请帮忙。我整个晚上都在研究这个问题，似乎无法找出未定义的响应。

Answer 1

对于ajax下载，您应该动态添加链接，触发点击，然后删除。

var formData = new FormData();
//Fill formData with fields and files
    console.log('Posting form from ajax');
    $.ajax({
        url: "/createPdf",
        type: "POST",
        data: formData,
        contentType: false,
        processData: false,
        xhrFields: {
            responseType: 'blob'
        },
        success: function (response, status, xhr) {
             var a = document.createElement('a');
            var url = window.URL.createObjectURL(response);
            a.href = url;
            a.download = 'myfile.pdf';
            a.click();
            window.URL.revokeObjectURL(url);
        },
        error: function (xhr, status, error) 
        { 
            var err = xhr.responseText; 
            alert(err); 
        }