使用XHRHttpRequest在Firefox中不工作下载文件

我正在对API执行XHR请求以检索文件的原始数据。使用XHRHttpRequest在Firefox中不工作下载文件

这个请求然后返回一个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不支持。点击（）函数，如请求经历，我可以看到在萤火文件的成功响应，它只是不下载。

，试图得到它在FF工作，我修改了下载功能，这一点：

3210

这再次铬工作（虽然我不能设置下载这个文件名），但仍然不在FF工作。

任何想法？

来源

2016-07-26 chinds

我想你”最好有一个链接供用户右键单击并“另存为...”。你正在做的是强制下载，这就是为什么'click（）'函数不能在FF中工作（我很惊讶它在Chrome中运行，tbh）。这不是“合作”的东西，而是“合作”。当文件准备就绪时，只需在页面上添加一个下载链接即可。 – Archer

我明白你的意思了，问题是要达到这个阶段，用户确实点击下载链接。点击该链接运行'onDownload'函数，该函数将请求发送到api以检索文件，但没有获得文件的链接。 – chinds

只是为了任何人知道我有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); 

     },

来源

2016-07-26 10:36:47 chinds

使用XHRHttpRequest在Firefox中不工作下载文件

回答

相关问题