使用HTML 5/JavaScript生成和保存文件

Question

使用HTML 5/JavaScript生成和保存文件我最近一直在摆弄WebGL，并且让一位Colada阅读器开始工作。问题是它非常慢(Colada是一种非常冗长的格式)，所以我将开始将文件转换为更容易使用的格式(可能是JSON)。我已经有了用JavaScript解析文件的代码，所以我也可以像我的导出程序一样使用它！问题是存钱。现在，我知道我可以解析文件，将结果发送到服务器，并让浏览器从服务器请求文件作为下载。但是在现实中，服务器与这个特定的过程没有任何关系，那么为什么要参与其中呢？我已经在内存中获得了所需文件的内容。是否可以使用纯JavaScript向用户提供下载？(我对此表示怀疑，但不妨问问.)而且要明确的是：我不想在用户不知情的情况下访问文件系统！用户将提供一个文件(可能通过拖放)，脚本将在内存中转换文件，用户将被提示下载结果。就浏览器而言，所有这些都应该是“安全的”活动。[编辑]：我没有提前提到它，所以回答“Flash”的海报是足够有效的，但我所做的部分工作是试图强调使用纯HTML 5所能做的事情。所以闪电侠就在我的案子里。(不过，对于任何做“真实”网络应用的人来说，这都是一个非常有效的答案。)在这种情况下，看来我运气不好，除非我想让服务器参与进来。不管怎样，谢谢！

Answer 1

HTML 5定义了window.saveAs(blob, filename)方法。现在任何浏览器都不支持它。但是有一个名为FileSaver.js这将此功能添加到大多数现代浏览器(包括InternetExplorer 10+)。Internet Explorer 10支持navigator.msSaveBlob(blob, filename)方法(MSDN用于InternetExplorer支持的FileSaver.js中。

我写了一个博客发帖关于这个问题的更多细节。

Answer 2

好的，创建一个数据：URI肯定对我有好处，感谢Matthew和Dennkster指出了这个选项！我基本上是这样做的：

1)将所有内容放入一个名为“content”的字符串中(例如，通过在那里创建内容或读取已构建页面的标记的innerHTML)。

2)构建数据URI：

uriContent = "data:application/octet-stream," + encodeURIComponent(content);

将有长度限制取决于浏览器类型等，但例如Firefox 3.6.12工作到至少256 K。用Base 64进行编码，而不是使用encodeURIComponent，可能会提高效率，但对我来说还可以。

3)打开一个新窗口并将其“重定向”到此URI提示，以获得JavaScript生成页面的下载位置：

newWindow = window.open(uriContent, 'neuesDokument');

就这样。