Javascript 使用XHRHttpRequest下载文件在firefox中不起作用

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

---

有什么想法吗？

如果有人想知道我现在已经下载了一个文件，请在下载功能中添加以下两行：

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

        },

---

如果有人想知道我现在已经下载了一个文件，请在下载功能中添加以下两行：

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

        },

---

我认为你最好有一个链接，让用户右键单击并“另存为…”。您所做的是强制下载，这就是为什么

click（）

函数在FF中不起作用的原因（我很惊讶它在Chrome，tbh中起作用）。这不是一个可以“解决”的问题，而是一个可以“合作”的问题。当文件准备好后，只需在页面上添加一个下载链接。我明白你的意思，问题是要进入这个阶段，用户确实要单击一个下载链接。单击该链接将运行

onDownload

函数，该函数将请求发送到api以检索文件，但它不会获得指向该文件的链接。我认为您最好为用户提供一个右键单击和“另存为…”的链接。您所做的是强制下载，这就是为什么

click（）

函数在FF中不起作用的原因（我很惊讶它在Chrome，tbh中起作用）。这不是一个可以“解决”的问题，而是一个可以“合作”的问题。当文件准备好后，只需在页面上添加一个下载链接。我明白你的意思，问题是要进入这个阶段，用户确实要单击一个下载链接。单击该链接将运行

onDownload

函数，该函数将请求发送到api以检索文件，但它不会获得指向该文件的链接。