2015-09-22 38 views
1

我想通過ajax啓動文件下載。我可以從服務器檢索數據,但無法讓瀏覽器打開數據。我不能指出瀏覽器的端點url處的location.href。從ajax下載的數據文件

我想要下載的資源通過需要自定義http標頭的端點以及身份驗證承載令牌公開。我無法更改後端api以允許cookie。因此,我不能只打開網址window.open(url,'_blank')

我可以向端點發出ajax請求,但我不知道如何在獲得響應後下載文件。

$.get("restAPI/file.pdf", function(data) { 
var w = window.open(null,'_blank') 
$(w.document.body).html(data); 
}); 

無法正常工作或

我希望做同樣的事情到

var w = window.open(data,'_blank') 

但這並不工作。

編輯

的解決方案,這要歸功於joyBlanks

$http({method: 'GET', 
        responseType:'arraybuffer', 
        headers: { 
         Accept: 'application/octet-stream',     
        }, url:url   } 
    ).then(function(data) { 
       var blob = new Blob([data.data]); 

       if (window.navigator.msSaveBlob) 
        window.navigator.msSaveBlob(blob, filename); 
       else {     
        var link = document.createElement('a'); 
        link.id = filename; 
        link.href = window.URL.createObjectURL(blob); 
        link.download = filename; 
        link.click(); 
       } 
}); 
+1

認證信息可以放在網址:HTTP'://用戶名:密碼@服務器/ path' – Barmar

+0

糾正我,如果我錯了,但好像你在問怎麼顯示服務器返回的數據。也許你可以嘗試像這樣 'document.getElementById(「elementToWrite」)。innerHTML = JSON.stringify(data,null,4);在ajax從服務器返回數據之後' 。 – user2879041

+0

不記名令牌認證,只是基本/摘要。另外,我還必須將其他自定義標頭傳遞給端點以及 –

回答

4

現代瀏覽器都支持的<a>標籤download屬性。

此屬性(如果存在)表示作者希望超鏈接用於下載資源,以便當用戶單擊鏈接時,系統會提示將它保存爲本地文件。如果該屬性具有值,則該值將用作保存提示中的預填文件名,該保存提示將在用戶單擊鏈接時打開(用戶在實際保存文件之前可以更改名稱)時打開。對允許的值沒有限制(雖然/和\將被轉換爲下劃線,阻止特定的路徑提示),但是您應該考慮大多數文件系統在文件名稱中支持哪些標點符號方面存在限制,瀏覽器可能會相應地調整文件名稱。

注意:網址和數據: 可與BLOB的形式使用的URL,以方便用戶下載是使用JavaScript生成的程序內容(例如,使用一個在線繪圖的Web應用程序創建的圖片) 。 如果存在HTTP頭Content-Disposition:並且給出與該屬性不同的文件名,則HTTP頭優先於該屬性。 如果此屬性存在且Content-Disposition:設置爲內聯,則Firefox會優先考慮Content-Disposition,如同文件名的情況一樣,而Chrome會優先考慮download屬性。 此屬性僅適用於具有相同來源的資源的鏈接。

<a download src="restAPI/file.pdf">Download File</a> 

所以,當你點擊一個標籤時,它會顯示一個彈出窗口,下載該文件。從請求我可以看到該文件已經可用。

你可以閱讀更多關於它的:https://developer.mozilla.org/en/docs/Web/HTML/Element/a

+0

謝謝,我認爲這是我正在尋找的,我將創建一個blob作爲數據的新元素,並用jquery點擊它 –

+0

這工作對我來說,謝謝 –

0

您將無法將文件從JavaScript保存。我建議您創建一個API調用,調用restAPI並將臨時文件保存在Web服務器上。然後將臨時文件名稱返回給javascript並重定向到它。瀏覽器應該提示用戶打開或保存。 下面是對這種方法的更多信息另一篇文章: Web Api won't download file using jQuery Ajax and Basic Auth