從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
});

確保您的后端為“ Content-Type”提供了正確的值。 文件類型的期望值為：

• CSV： text/csv
• PDF： application/pdf
• Excel： application/vnd.ms-excel