使用 HTML5/JavaScript 生成并保存文件 [英] Using HTML5/JavaScript to generate and save a file

查看:24
本文介绍了使用 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');

就是这样.

这篇关于使用 HTML5/JavaScript 生成并保存文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆