使用HTML5/JavaScript生成并保存文件

我最近一直在摆弄WebGL，并得到了一个Collada阅读器工作。问题是它非常慢(Collada是一种非常冗长的格式)，所以我将开始将文件转换为更容易使用的格式(可能是JSON)。我已经有代码来解析JavaScript文件，所以我不妨使用它作为我的出口商太!问题在于储蓄。

现在，我知道我可以解析文件，将结果发送到服务器，并让浏览器从服务器请求返回文件作为下载。但实际上，服务器与这个特定的进程没有任何关系，那么为什么要把它牵扯进来呢?我在内存中已经有了所需文件的内容。是否有任何方法可以使用纯JavaScript向用户提供下载?(我对此表示怀疑，但不妨问问……)

需要明确的是:我不会在用户不知情的情况下访问文件系统!用户将提供一个文件(可能通过拖放)，脚本将转换内存中的文件，并提示用户下载结果。就浏览器而言，所有这些都应该是“安全”的活动。

[编辑]:我没有在前面提到它，所以那些回答“Flash”的帖子是有道理的，但我所做的部分工作是试图强调纯HTML5可以做什么……所以闪电侠正好适合我。(尽管这对于任何制作“真正的”web应用程序的人来说都是一个非常有效的答案)在这种情况下，除非我想要涉及服务器，否则我看起来很不走运。谢谢!

当前回答

看看Doug Neiner的downadify，这是一个基于Flash的JavaScript界面。

downloadadify是一个很小的JavaScript + Flash库，可以在浏览器中生成和保存文件，而不需要服务器交互。

2010-05-24 14:22:08

其他回答

这里有一个链接到Mathew建议的数据URI方法，它在safari上工作，但不是很好，因为我不能设置文件类型，它被保存为“未知”，然后我不得不再次去那里，改变它，以便查看文件…

http://www.nihilogic.dk/labs/canvas2image/

2010-09-14 14:41:18

您可以使用localStorage。这相当于Html5中的cookie。它似乎可以在Chrome和Firefox上运行，但在Firefox上，我需要将它上传到服务器上。也就是说，直接在我的家用电脑上测试不起作用。

我正在做HTML5的例子。访问http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html 转到迷宫一。重建迷宫的信息使用localStorage存储。

我读这篇文章是为了寻找用于加载和处理xml文件的HTML5 JavaScript。它是否与旧的html和JavaScript相同????

2010-06-01 19:03:37

function download(content, filename, contentType)
{
    if(!contentType) contentType = 'application/octet-stream';
        var a = document.createElement('a');
        var blob = new Blob([content], {'type':contentType});
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.click();
}

2013-10-07 17:03:17

简单的解决方案!

适用于所有现代浏览器。

2016-08-26 11:55:22

try

let a = document.createElement('a'); a.href = "data:application/octet-stream，"+encodeURIComponent('我的数据'); a.download = 'myFile.json'; a.click ();//我们不添加'a'到DOM，所以不需要删除

如果你想下载二进制数据，看这里

更新

2020.06.14我将Chrome升级到83.0及以上SO代码片段停止工作(由于沙箱安全限制)-但JSFiddle版本工作-在这里

2019-04-21 16:13:58

使用HTML5/JavaScript生成并保存文件

推荐文章

最新文章

标签