使用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中不工作下載文件

回答

相關問題