使用 XHRHttpRequest 下载文件在 Firefox 中不起作用答案

【问题标题】：downloading of file using XHRHttpRequest not working in firefox使用 XHRHttpRequest 下载文件在 Firefox 中不起作用
【发布时间】：2016-07-26 18:36:47
【问题描述】：

我正在向 API 发出 XHR 请求以检索文件的原始数据。

然后，此请求将文件数据返回一个 blob，我从所述 blob 创建一个对象 URL 并创建一个 href 元素，我可以在其中设置文件名和下载属性，然后我以编程方式单击链接并下载文件。

但是，这仅适用于 chrome 而不是 firefox。

这是用于发出请求并在成功请求时下载文件的代码。

onDownload: function(e) {
            if(e) { e.preventDefault(); }

            // removes the document store location from the base URL to match the endpoint for downloading a document
            var url = this.baseUrl.replace(/\/(?!.*\/).*/, "");
            var downloadUrl = url+ '?publicUrl=' + this.model.get('location');
            var self = this;

            var xhr =  new XMLHttpRequest();
            xhr.open('GET', downloadUrl, true);
            xhr.responseType = 'blob';

            xhr.onload = function(xhrEvent) {
                if (xhr.status === 200) {
                    self.fileIsAvailable(xhr.response);
                } else {
                    self.fileIsNotAvailable(xhr.status);
                }
            };

            xhr.send();
        },

        fileIsAvailable: function (response) {
            Analytics.sendEvent({
                category: Analytics.categories.documentPicker,
                action: 'download-success'
            });    

            // create file and download link, then clicks download link to download file
            var blob = response;
            var downloadUrl = URL.createObjectURL(blob);
            var downloadLink = document.createElement('a');
            downloadLink.href = downloadUrl;
            downloadLink.download = this.getFileName(this.model.get('location'));
            downloadLink.click();
            window.URL.revokeObjectURL(downloadUrl);

            // window.open(downloadUrl, '_blank');
        },

我的理解是 firefox 不支持 .click() 函数，因为请求正在处理，我可以在 firebug 中看到文件的成功响应，只是没有下载。

为了尝试让它在 FF 上运行，我将下载功能修改为：

fileIsAvailable: function (response) {
            Analytics.sendEvent({
                category: Analytics.categories.documentPicker,
                action: 'download-success'
            });    

            // create file and download link, then clicks download link to download file
            var blob = response;
            var downloadUrl = URL.createObjectURL(blob);
            window.open(downloadUrl, '_blank');
        },

它再次在 chrome 中工作（虽然我无法设置下载时的文件名）但在 FF 中仍然不起作用。

有什么想法吗？

【问题讨论】：

我认为你最好有一个链接供用户右键单击并“另存为...”。你正在做的是强制下载，这就是为什么 click() 函数在 FF 中不起作用（我很惊讶它在 Chrome 中起作用，tbh）。这不是“解决”问题，而是“处理”。文件准备好后，只需将下载链接添加到页面即可。
我明白你的意思，问题是要进入这个阶段，用户确实点击了下载链接。单击该链接运行onDownload 函数，该函数将请求发送到api 以检索文件，它没有获得文件的链接。

标签： javascript firefox download xmlhttprequest

【解决方案1】：

对于任何想知道我现在通过将这两行添加到下载函数中的 FF 下载文件的人：

document.body.appendChild(downloadLink);

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

所以我的下载功能现在看起来像：

fileIsAvailable: function (response) {
            Analytics.sendEvent({
                category: Analytics.categories.documentPicker,
                action: 'download-success'
            });    

            // create file and download link, then clicks download link to download file
            var blob = response;
            var downloadUrl = window.URL.createObjectURL(blob);
            var downloadLink = document.createElement('a');
            downloadLink.href = downloadUrl;
            downloadLink.download = this.getFileName(this.model.get('location'));
            document.body.appendChild(downloadLink);
            downloadLink.click();
            setTimeout(function() {
                window.URL.revokeObjectURL(downloadUrl);
            }, 100);

        },

【讨论】：