如何讓瀏覽器下載存儲在JavaScript字符串中的文件？

Question

我已經能夠編寫JavaScript導致瀏覽器使用這樣的代碼遠程服務器下載文件：

var iframe = document.createElement("iframe"); 
iframe.style.display = "none"; 
iframe.src = "filename.zip" 
document.body.appendChild(iframe); 

偉大的工程。但是，現在我有一種不同的情況，在瀏覽器端JavaScript文件的內容存儲在字符串中，我需要觸發該文件的下載。我試圖取代以上這三線，其中「myFileContents」是包含該文件的實際字節字符串：

iframe.src = "data:application/octet-stream;base64," + Base64.encode(myFileContents); 

這得到下載的文件，但文件名丟失。在Chrome中，文件名稱只是「下載」。另外我讀過一些瀏覽器版本允許的文件大小限制。

有沒有辦法做到這一點？使用JQuery可以。該解決方案需要支持任何類型的文件 - ZIP，PDF，CSV，PNG，JPG，XLS等...

Answer 1

在some newer browsers，你可以使用新的HTML5 download attribute上a標籤來實現這一點：

var a = document.createElement('a'); 
a.download = "filename.txt"; 
a.href = "data:application/octet-stream;base64," + Base64.encode(myFileContents); 
a.click(); 

對於未來的解決方案，您可以查看HTML5 FileSystem API，但此API爲not currently supported in most of the major browsers。它可能沒有多大用處，除非它可能爲您提供另一種本地存儲文件的方法，如果您對此有所瞭解。但它不會將文件存儲在用戶本地可訪問的文件系統中，您將不得不爲用戶開發自己的基於瀏覽器的界面來與文件進行交互。在任何情況下，將文件從HTML5文件系統下載到用戶本地文件系統將在a標籤上再次使用新的下載屬性來完成，該標籤隨後將引用HTML5文件系統中的位置而不是引用在線位置。

要與你將不得不使用客戶端的JavaScript的iframe中Content-Disposition請求頭不知何故設置爲inline; filename="filename.txt"的iframe元素做到這一點，我不認爲這是可能做到這一點，很可能是因爲安全問題。如果你真的沒有其他選擇，你可以通過使用AJAX將字符串發送到服務器，然後從那裏再次下載並設置正確的請求頭來終止下載速度。