javascript - 使用HTML5 / JavaScript生成并保存文件(Using HTML5/JavaScript to generate and save a file)

Question

I've been fiddling with WebGL lately, and have gotten a Collada reader working.(我最近一直在摆弄WebGL，并让Collada阅读器工作。)

Problem is it's pretty slow (Collada is a very verbose format), so I'm going to start converting files to a easier to use format (probably JSON).(问题是它相当慢（Collada是一种非常冗长的格式），所以我将开始将文件转换为更易于使用的格式（可能是JSON）。) I already have the code to parse the file in JavaScript, so I may as well use it as my exporter too!(我已经有了使用JavaScript解析文件的代码，因此我也可以将其用作导出器！) The problem is saving.(问题正在保存。)

Now, I know that I can parse the file, send the result to the server, and have the browser request the file back from the server as a download.(现在，我知道我可以解析文件，将结果发送到服务器，然后让浏览器从服务器请求文件下载作为下载。)

But in reality the server has nothing to do with this particular process, so why get it involved?(但是实际上，服务器与此特定过程无关，那么为什么要参与其中呢？) I already have the contents of the desired file in memory.(我已经在内存中保存了所需文件的内容。) Is there any way that I could present the user with a download using pure JavaScript?(有什么办法可以使用户使用纯JavaScript进行下载？) (I doubt it, but might as well ask...)(（我对此表示怀疑，但也可能会问...）)

And to be clear: I am not trying to access the filesystem without the users knowledge!(需要明确的是：我不会在用户不知情的情况下访问文件系统！)

The user will provide a file (probably via drag and drop), the script will transform the file in memory, and the user will be prompted to download the result.(用户将提供一个文件（可能通过拖放操作），脚本将转换文件在内存中的位置，并提示用户下载结果。) All of which should be "safe" activities as far as the browser is concerned.(就浏览器而言，所有这些都应该是“安全”的活动。)

([EDIT]:)

I didn't mention it upfront, so the posters who answered "Flash" are valid enough, but part of what I'm doing is an attempt to highlight what can be done with pure HTML5... so Flash is right out in my case.(([编辑]：)我没有提前提到它，所以回答“ Flash”的海报是足够有效的，但是我正在做的部分工作是试图强调使用纯HTML5可以完成的工作...因此Flash是就我而言。) (Though it's a perfectly valid answer for anyone doing a "real" web app.) That being the case it looks like I'm out of luck unless I want to involve the server.(（尽管对于任何使用“真实” Web应用程序的人来说，这都是一个非常有效的答案。）在这种情况下，除非我不想让服务器参与其中，否则看起来我很不走运。) Thanks anyway!(不管怎么说，还是要谢谢你！)   ask by Toji translate from so

Answer 1

Simple solution for HTML5 ready browsers...(适用于HTML5的浏览器的简单解决方案...)

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

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

Usage(用法)

download('test.txt', 'Hello world!');