使用 HTML5/JavaScript 生成和保存文件
我最近一直在摆弄 WebGL，并让 Collada 阅读器工作.问题是它非常慢(Collada 是一种非常冗长的格式)，所以我将开始将文件转换为更易于使用的格式(可能是 JSON).我已经有了用 JavaScript 解析文件的代码，所以我也可以将它用作我的导出器！问题是保存.
I've been fiddling with WebGL lately, and have gotten a Collada reader working. 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). I already have the code to parse the file in JavaScript, so I may as well use it as my exporter too! The problem is saving.
现在，我知道我可以解析文件，将结果发送到服务器，并让浏览器从服务器请求文件作为下载.但实际上服务器与这个特定进程无关，那么为什么要参与其中呢?我已经在内存中有所需文件的内容.有什么方法可以让用户使用纯 JavaScript 下载?(我对此表示怀疑，但不妨问问......)
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? (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.
:我没有提前提及，所以回答Flash"的发帖人足够有效，但我正在做的部分工作是试图强调可以用纯 HTML5 完成......所以在我的情况下，Flash 是正确的.(尽管对于任何做真正的"网络应用程序的人来说，这都是一个完全有效的答案.)在这种情况下，除非我想涉及服务器，否则我看起来很不走运.还是谢谢！
: 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. (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. Thanks anyway!
推荐答案
好的，创建一个 data:URI 确实对我有用，感谢 Matthew 和 Dennkster 指出该选项！这基本上是我的做法:
OK, creating a data:URI definitely does the trick for me, thanks to Matthew and Dennkster pointing that option out! Here is basically how I do it:
1) 将所有内容放入一个名为content"的字符串中(例如，通过最初在那里创建它或通过读取已构建页面的标签的 innerHTML).
1) get all the content into a string called "content" (e.g. by creating it there initially or by reading innerHTML of the tag of an already built page).
2) 构建数据 URI:
2) Build the data URI:
uriContent = "data:application/octet-stream," + encodeURIComponent(content);
会有长度限制，具体取决于浏览器类型等，但例如Firefox 3.6.12 至少可以工作到 256k.在 Base64 中编码而不是使用 encodeURIComponent 可能会使事情更高效，但对我来说没问题.
There will be length limitations depending on browser type etc., but e.g. Firefox 3.6.12 works until at least 256k. Encoding in Base64 instead using encodeURIComponent might make things more efficient, but for me that was ok.
3) 打开一个新窗口并将其重定向"到此 URI 提示我的 JavaScript 生成页面的下载位置:
3) open a new window and "redirect" it to this URI prompts for a download location of my JavaScript generated page:
newWindow = window.open(uriContent, 'neuesDokument');
就是这样.
相关文章