如何在浏览器(无服务器)中创建文件并使用JavaScript生成下载

本文概述

自我实现的下载功能
使用图书馆

使用JavaScript生成并下载文件？如果考虑到这一点, 它就没有你想像的那么安全, 并且在没有用户交互的情况下也不应该被允许(但是现在是允许的)。
假设你使用的是Google Chrome浏览器, 并且启用了” 自动打开下载的文件” 选项, 但如果碰巧, 你进入了一个恶意网站, 它会下载未知文件。你知道这个故事的结局。
但是, 在最新的浏览器中, 不知道或很少下载的文件扩展名将被阻止, 如果你确实要打开该文件(在Chrome中则更少), 则会出现提示。
因此, 在最近几年中很难实现文件的自动下载, 但是现在随着HTML5的引入, 此任务变得更容易实现。
在本文中, 我们将向你展示使用纯Javascript直接生成和下载文件的一些技巧。
自我实现的下载功能【如何在浏览器(无服务器)中创建文件并使用JavaScript生成下载】通过以下简单功能, 你可以直接在浏览器中生成文件下载, 而无需联系任何服务器。它使用< a> 元素的download属性, 因此可在所有HTML5 Ready浏览器上使用：

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); }// Start file download.download("hello.txt", "This is the content of my file :)");

download属性指定当用户单击超链接时将下载目标。仅当设置了href属性时, 才使用此属性。
你可以在以下小提琴中看到此片段的运行情况：
使用图书馆建立图书馆, 而不是战争。 FileSaver.js在本身不支持它的浏览器中实现saveAs()FileSaver接口。
如果你需要保存更大的大型文件, 而不是blob的大小限制或没有足够的RAM, 那么请看一下更高级的StreamSaver.js, 它可以利用新流的功能将数据异步地直接直接保存到硬盘中API。这样可以支持进度, 取消操作并知道何时完成编写。
以下代码段允许你生成文件(具有任何扩展名)并下载它, 而无需联系任何服务器：

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

浏览器	构造为	档名	最大斑点大小	依存关系
Firefox 20+	斑点	是	800 MiB	None
Firefox < 20	数据：URI	No	不适用	Blob.js
铬	斑点	是	500 MiB	None
适用于Android的Chrome	斑点	是	500 MiB	None
边缘	斑点	是	?	None
IE 10以上	斑点	是	600 MiB	None
歌剧15+	斑点	是	500 MiB	None
歌剧< 15	数据：URI	No	不适用	Blob.js
Safari 6.1 + *	斑点	No	?	None
Safari < 6	数据：URI	No	不适用	Blob.js

注意：尽管它支持最新的浏览器, 但是要提供全面的支持, 你需要知道一些技巧。
IE < 10
没有基于Flash的Polyfill, 可以将文本文件保存在IE < 10中。有关更多详细信息, 请参见ChenWenBrian和koffsyrup的saveTextAs()。
Safari 6.1+
有时可能会打开而不是保存Blob-在打开文件后, 你可能必须指示Safari用户手动按？+ S保存文件。使用应用程序/八位字节流MIME类型强制下载可能会导致Safari问题。
的iOS
saveAs必须在用户互动事件(例如onTouchDown或onClick)中运行； setTimeout将阻止saveAs触发。由于iOS的限制, 另存为将在新窗口中打开, 而不是在新窗口中打开, 如果你要修复此问题, 请告诉Apple该错误如何影响你。
玩得开心！