javascript - 使用 XMLHttpRequest 下载文件在 Firefox 中不起作用

Question

我正在向 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 中仍然不起作用。

有什么想法吗？

Answer 1

对于那些想知道我现在可以通过将这两行添加到下载函数来下载文件的人:

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

        },