javascript - 从 AJAX 调用下载文件

Question

我正在尝试使用 ExtJS 从 AJAX 调用的响应中下载文件。我从服务器端使用 Java 和 Spring 发送文件的字节流。我认为这很好用，因为当我使用 Postman 时，我可以毫无问题地下载我的文件。

当我尝试从浏览器(Chrome)下载它时，尽管下载有效，但文件似乎已损坏。首先我选择我想要的文件类型(CSV、PDF 或 Excel)，后端将我的文件转换为它，然后将其发送到前端。 CSV 有效，但 PDF 没有显示任何内容，并且 Excel 表示文件已损坏。根据我的尝试，我认为问题可能在于编码，发送的字节流与Chrome下载的字节流不一样。

这是 ExtJS 代码:

function runScript(id, text) {
Ext.Ajax.request({
    url: 'http://localhost:8080/report/execute',
    useDefaultXhrHeader: false,
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    jsonData: { id: id,
                type: text },
    cors: true,
    waitMsg: 'Sending data ...',
    success: function (response) {
        var disposition = response.getResponseHeader('Content-Disposition');
        var filename = disposition.slice(disposition.indexOf("=")+1,disposition.length);
        var blob = new Blob([response.responseText]);
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
            // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created These URLs will no longer resolve as the data backing the URL has been freed."
            window.navigator.msSaveBlob(blob, filename);
        }
        else {
            var URL = window.URL || window.webkitURL;
            var downloadUrl = URL.createObjectURL(blob);
            if (filename) {
                // use HTML5 a[download] attribute to specify filename
                var a = document.createElement("a");
                // safari doesn't support this yet
                a.href = downloadUrl;
                a.download = filename;
                document.body.appendChild(a);
                a.click();
            }
        }
            setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
    },
    failure: function () {
        Ext.Msg.alert('Failed', 'Download failed!');
    }
});

Ext.getCmp('sqlview').getStore().load();

}

Answer 1

您需要设置 Blob 中包含的数据的 MIME 类型。

var contentType = response.getResponseHeader('Content-Type');
var blob = new Blob([response.responseText], {
  type: contentType
});

确保您的后端为“内容类型”提供正确的值。文件类型的预期值为:

• CSV:文本/csv
• PDF:application/pdf
• Excel:application/vnd.ms-excel