使用js生成文件并下载

使用Javascript生成和下载文件？如果考虑到这一点，这并不像您想的那样安全，如果没有用户交互，就不应该允许这样做(但是现在允许)。假设您使用了GoogleChrome，并且启用了“自动打开下载的文件”选项，而由于运气不好，您输入一个恶意网站并生成一个未知文件的下载。你知道这个故事的结局。然而，在最新的浏览器中，不知道或很少下载的文件扩展名会被阻止，如果您真的想打开该文件(在Chrome中是较少的)，则会出现一个提示。因此，文件的自动下载在最近几年一直难以实现，但是现在随着HTML 5的引入，这个任务变得更加容易实现。在这篇文章中，我们将向您展示一些使用纯Javascript直接生成和下载文件的技巧。

Self-implemented download function（自己实现下载函数）

下面的简单函数允许您直接在浏览器中生成文件，而无需接触任何服务器。它适用于所有HTML5就绪的浏览器，因为它使用了的下载属性：

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);
}

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

下载属性指定当用户单击超链接时将下载目标。只有在设置href属性时才使用此属性。

Using a library（使用库）

创建库，FileSaver.js在不支持saveAs()的FileSaver接口的浏览器中实现它。如果您需要保存更大的文件，或者BLOB的大小限制，或者没有足够的内存，那么请看一看更高级的StreamSaver.js，它可以使用新的StreamsAPI的强大功能将数据直接异步保存到硬盘中。同时支持进度查看，取消和何时完成。
下面的代码段允许您生成一个文件(具有任何扩展名)并下载它，而无需链接任何服务器：

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在不同浏览器中的兼容性：

Browser	Constructs as	Filenames	Max Blob Size	Dependencies
Firefox 20+	Blob	Yes	800 MiB	None
Firefox < 20	data: URI	No	n/a	Blob.js
Chrome	Blob	Yes	[500 MiB][3]	None
Chrome for Android	Blob	Yes	[500 MiB][3]	None
Edge	Blob	Yes	?	None
IE 10+	Blob	Yes	600 MiB	None
Opera 15+	Blob	Yes	500 MiB	None
Opera < 15	data: URI	No	n/a	Blob.js
Safari 6.1+*	Blob	No	?	None
Safari < 6	data: URI	No	n/a	Blob.js
Safari 10.1+	Blob	Yes	n/a	None

注意： 尽管它支持最新的浏览器，但您需要了解几个技巧才能更好运用。

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 ⌘+S 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.

下面三个就不翻译了，一来不影响使用，二来我没有看里面内容:blush::blush::blush:

---

本文为英文翻译过来，原文链接：如何在浏览器中使用JavaScript创建下载文件