处理从 ajax post 下载的文件

Question

我有一个将 ajax POST 请求发送到某个 URL 的 javascript 应用程序。响应可能是 JSON 字符串，也可能是文件（作为附件）。我可以在我的 ajax 调用中轻松检测 Content-Type 和 Content-Disposition，但是一旦我检测到响应包含一个文件，我如何让客户端下载它？我在这里阅读了许多类似的主题，但没有一个提供我正在寻找的答案。

请，请，请不要发布建议我不应该为此使用 ajax 或我应该重定向浏览器的答案，因为这都不是一个选项。使用纯 HTML 表单也不是一种选择。我需要的是向客户端显示一个下载对话框。这可以做到吗？怎么做？

原文由 Pavle Predic 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

创建一个表单，使用 POST 方法，提交表单 - 不需要 iframe。当服务器页面响应请求时，为文件的 mime 类型编写响应标头，它将显示一个下载对话框 - 我已经这样做了很多次。

您想要应用程序/下载的内容类型 - 只需搜索如何为您使用的任何语言提供下载。

原文由 user571545 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

不要这么快就放弃，因为这可以（在现代浏览器中）使用部分 FileAPI 来完成：

 var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.responseType = 'blob';
xhr.onload = function () {
    if (this.status === 200) {
        var blob = this.response;
        var filename = "";
        var disposition = xhr.getResponseHeader('Content-Disposition');
        if (disposition && disposition.indexOf('attachment') !== -1) {
            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            var matches = filenameRegex.exec(disposition);
            if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
        }

        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
                if (typeof a.download === 'undefined') {
                    window.location.href = downloadUrl;
                } else {
                    a.href = downloadUrl;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                }
            } else {
                window.location.href = downloadUrl;
            }

            setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
        }
    }
};
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send($.param(params, true));

或者如果使用 jQuery.ajax：

 $.ajax({
    type: "POST",
    url: url,
    data: params,
    xhrFields: {
        responseType: 'blob' // to avoid binary data being mangled on charset conversion
    },
    success: function(blob, status, xhr) {
        // check for a filename
        var filename = "";
        var disposition = xhr.getResponseHeader('Content-Disposition');
        if (disposition && disposition.indexOf('attachment') !== -1) {
            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            var matches = filenameRegex.exec(disposition);
            if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
        }

        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
                if (typeof a.download === 'undefined') {
                    window.location.href = downloadUrl;
                } else {
                    a.href = downloadUrl;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                }
            } else {
                window.location.href = downloadUrl;
            }

            setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
        }
    }
});

原文由 Jonathan Amend 发布，翻译遵循 CC BY-SA 4.0 许可协议