使用Javascript生成和下載文件？如果考慮到這一點(diǎn)，這并不像您想的那樣安全，如果沒有用戶交互，就不應(yīng)該允許這樣做(但是現(xiàn)在允許)。假設(shè)您使用了GoogleChrome，并且啟用了“自動(dòng)打開下載的文件”選項(xiàng)，而由于運(yùn)氣不好，您輸入一個(gè)惡意網(wǎng)站并生成一個(gè)未知文件的下載。你知道這個(gè)故事的結(jié)局。然而，在最新的瀏覽器中，不知道或很少下載的文件擴(kuò)展名會(huì)被阻止，如果您真的想打開該文件(在Chrome中是較少的)，則會(huì)出現(xiàn)一個(gè)提示。因此，文件的自動(dòng)下載在最近幾年一直難以實(shí)現(xiàn)，但是現(xiàn)在隨著HTML 5的引入，這個(gè)任務(wù)變得更加容易實(shí)現(xiàn)。在這篇文章中，我們將向您展示一些使用純Javascript直接生成和下載文件的技巧。

Self-implemented download function（自己實(shí)現(xiàn)下載函數(shù)）

下面的簡單函數(shù)允許您直接在瀏覽器中生成文件，而無需接觸任何服務(wù)器。它適用于所有HTML5就緒的瀏覽器，因?yàn)樗褂昧?lt;a>的下載屬性：

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

調(diào)用download("hello.txt","This is the content of my file :)");即可

下載屬性指定當(dāng)用戶單擊超鏈接時(shí)將下載目標(biāo)。只有在設(shè)置href屬性時(shí)才使用此屬性。

Using a library（使用庫）

創(chuàng)建庫，FileSaver.js在不支持saveAs()的FileSaver接口的瀏覽器中實(shí)現(xiàn)它。如果您需要保存更大的文件，或者BLOB的大小限制，或者沒有足夠的內(nèi)存，那么請(qǐng)看一看更高級(jí)的StreamSaver.js，它可以使用新的StreamsAPI的強(qiáng)大功能將數(shù)據(jù)直接異步保存到硬盤中。同時(shí)支持進(jìn)度查看，取消和何時(shí)完成。
下面的代碼段允許您生成一個(gè)文件(具有任何擴(kuò)展名)并下載它，而無需鏈接任何服務(wù)器：

var content = "What's up , hello world";
// any kind of extension (.txt,.cpp,.cs,.bat)
var filename = "hello.txt";

var blob = new Blob([content], {
 type: "text/plain;charset=utf-8"
});

saveAs(blob, filename);

下表顯示了FileSaver.js在不同瀏覽器中的兼容性：

注意： 盡管它支持最新的瀏覽器，但您需要了解幾個(gè)技巧才能更好運(yùn)用。

IE < 10

It is possible to save text files in IE < 10 without Flash-based polyfills.
See ChenWenBrian and koffsyrup's saveTextAs() for more details.

Safari 6.1+

Blobs may be opened instead of saved sometimes—you may have to direct your Safari users to manually
press <kbd>?</kbd>+<kbd>S</kbd> to save the file after it is opened. Using the application/octet-stream MIME type to force downloads can cause issues in Safari.

iOS

saveAs must be run within a user interaction event such as onTouchDown or onClick; setTimeout will prevent saveAs from triggering. Due to restrictions in iOS saveAs opens in a new window instead of downloading, if you want this fixed please tell Apple how this bug is affecting you.

下面三個(gè)就不翻譯了，一來不影響使用，二來我沒有看里面內(nèi)容:blush::blush::blush:

本文為英文翻譯過來，原文鏈接：如何在瀏覽器中使用JavaScript創(chuàng)建下載文件