Ajax 请求接收二进制数据答案

【问题标题】：Ajax request receives binary dataAjax 请求接收二进制数据
【发布时间】：2014-03-26 16:38:25
【问题描述】：

我有一个 ajax 请求，它上传一个文件和一些其他数据，解析它，然后以 xls 格式下载它。我目前使用 ajax 正确上传文件，但是当调用成功函数时，它会接收二进制数据作为其参数“数据”。我想获取这些数据并用它创建一个文件，并将其呈现给用户，就好像它已被下载一样。这可能吗？这是我的 ajax 请求。

$("#fileForm").submit(function(){
    var fileData = $("#fileInputElmt").prop("files")[0];
    var data = new FormData();
    data.append("upload",fileData);
    var url = "process.action?" + $("#fileForm").serialize();
    console.log(url);
    console.log(data);
    $.ajax({
        type: "POST",
        url:url,
        data:data,
        cache:false,
        contentType:false,
        processData:false,
        success:function(data){
            console.log("success"+data);
            hideProgressBar();
        },error:function(data){
            console.log("error "+data);
            hideProgressBar();
        }
    });
    return false;
});

【问题讨论】：

标签： javascript jquery ajax download

【解决方案1】：

你正在寻找这样的东西。

function downloadPDF() {

var xhr = new XMLHttpRequest();
xhr.open('POST', API_URL, true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
    if (this.status == 200) {
        var bb = new window.WebKitBlobBuilder();
        bb.append(this.response); // Note: not xhr.responseText

        var blob = bb.getBlob('application/pdf');
        var blobURL = window.webkitURL.createObjectURL(blob);

        window.open(blobURL);
    }
};

xhr.send(createRequest());
}

仅适用于较新的浏览器、Chrome IE9+ 等...

示例使用 xhr，但如果您的 ajax 调用返回二进制文件，您应该能够执行类似操作。

【讨论】：