Question

我正在对API执行XHR请求以检索文件的原始数据。

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

但是这只适用于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);

        },

使用XHRHttpRequest下载文件无法在firefox

1 个答案: