Question

目标：从服务器下载动态创建的XLSX文件。问题：XHR.responseText函数中的$.ajax success与从DEV工具“网络”选项卡中查看的XMLHttpResponse不同。（使用Firefox 62.0.3 64位，使用Go Lang创建文档，使用jQuery 3.1.0管理AJAX响应）

如果将DEV工具的内容复制到<a href>标记中，则文件将正确下载。

<a download="excelTest.xlsx" href="data:application/octet-stream;charset=utf-8;base64,UEsDBBQAC....CAAgAAKxUAAAAA">Download file</a>

http://jsfiddle.net/amoedwzL/

但是，如果通过编程方式使用XHR.responseText值设置了相同的锚点，则会得到一个损坏的Excel文档。

<a id="downloader" download="excelTest.xlsx" href="">Download file</a>
var responseText = "PK\u0003\u0004\u0014....\u0000\u0000\u0000"
document.getElementById("downloader").href = "data:application/octet-stream;charset=utf-8," + responseText

http://jsfiddle.net/amoedwzL/1/

示例Excel文档应具有1个标题为“ Stackoverflow”的工作表，其中的A1单元格包含文本“ test”。

Answer 1

看来，“ Firefox网络”选项卡显示的内容与“ Chrome网络选项卡预览”屏幕的等效。 Chrome显示了相同的内容，但也显示了未渲染的版本。一位同事能够提出一个解决方案，如下所示。

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function () {
    if (xhr.readyState === xhr.DONE) {
        if (xhr.status === 200) {
            //Create anchor to hold the data for download
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.style = "display: none";
            url = window.URL.createObjectURL(xhr.response);
            a.href = url;
            a.download = "excelDocument.xlsx";
            a.click();
            window.URL.revokeObjectURL(url);
        }
    }
};

这是以前处理服务器响应的内容，如下所示。

$.ajax({       
    method: "POST",
    dataType: "script", //This was changed to blob, to no effect
    url: url,
    data: d,
    success: function(data, status, xhr){
        if (xhr.status == 200){
            callback(data); //Sets href value, nothing special happens here
            return
        }

        App.handleError(data, status, xhr);
    },
    error: function(data, status, xhr){
        console.error("Error " + data.status + ": " + data.statusText);
    },
});

似乎是涉及jQuery的罪魁祸首，但我们不确定原因。

XMLHttpResponse有效负载与XHR.responseText不同

1 个答案: