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

问题描述

最近我一直在玩WebGL，并获得了Collada读者的工作。问题是很慢（Collada是一个非常详细的格式），所以我要开始将文件转换为更容易使用的格式（可能是JSON）。事实上，我已经有了代码来解析Javascript中的文件，所以我也可以用它作为我的出口商！问题是保存。

现在，我知道我可以解析文件，将结果发送到服务器，让浏览器从服务器请求文件下载。但实际上，服务器与这个特定的过程无关，那么为什么要涉及到它呢？我已经拥有内存中所需文件的内容。有什么办法可以使用纯JavaScript向用户提供下载？ （我怀疑，但也可以问...）

要清楚：我没有尝试访问文件系统，没有用户的知识！用户将提供一个文件（可能通过拖放），脚本将转换内存中的文件，并提示用户下载结果。所有这些都应该是浏览器的安全活动。

：我没有提到所以回答Flash的海报是足够有效的，但是我正在做的一部分是试图强调使用纯粹的HTML5可以做什么...所以Flash在我的情况下是正确的。 （虽然这是一个完美有效的答案，任何人做一个真正的网络应用程序。）就这样，我看起来像运气不好，除非我想要涉及服务器。感谢无论如何！

解决方案

确定，创建一个数据：URI绝对是我的窍门，感谢Matthew和Dennkster指出这个选项出来了！这里基本上是我如何做的：

1）将所有内容都转换成一个名为content的字符串（例如，最初创建它或通过读取标签的innerHTML已经建立的页面）。

2）构建数据URI：

  uriContent =data：application / octet-stream，+ encodeURIComponent（content）; 
  

根据浏览器类型等会有长度限制， Firefox 3.6.12可以运行至少256k。编码在Base64而不是使用encodeURIComponent可能会使事情更有效率，但对我来说，这是可以的。

3）打开一个新窗口，并将其重定向到此URI提示符我的JavaScript生成页面的下载位置：

  newWindow = window.open（uriContent，'neuesDokument'）; 
  

就是这样。

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). Thing is, 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.

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.

[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. (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!

解决方案

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) 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) Build the data URI:

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

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) 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');

That's it.

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