我最近一直在摆弄WebGL,并得到了一个Collada阅读器工作。问题是它非常慢(Collada是一种非常冗长的格式),所以我将开始将文件转换为更容易使用的格式(可能是JSON)。我已经有代码来解析JavaScript文件,所以我不妨使用它作为我的出口商太!问题在于储蓄。
现在,我知道我可以解析文件,将结果发送到服务器,并让浏览器从服务器请求返回文件作为下载。但实际上,服务器与这个特定的进程没有任何关系,那么为什么要把它牵扯进来呢?我在内存中已经有了所需文件的内容。是否有任何方法可以使用纯JavaScript向用户提供下载?(我对此表示怀疑,但不妨问问……)
需要明确的是:我不会在用户不知情的情况下访问文件系统!用户将提供一个文件(可能通过拖放),脚本将转换内存中的文件,并提示用户下载结果。就浏览器而言,所有这些都应该是“安全”的活动。
[编辑]:我没有在前面提到它,所以那些回答“Flash”的帖子是有道理的,但我所做的部分工作是试图强调纯HTML5可以做什么……所以闪电侠正好适合我。(尽管这对于任何制作“真正的”web应用程序的人来说都是一个非常有效的答案)在这种情况下,除非我想要涉及服务器,否则我看起来很不走运。谢谢!
我发现了两种简单的方法。首先,使用已单击的元素并注入下载数据。其次,使用下载数据生成一个a元素,执行a.click()并再次删除它。但是第二种方法只有在用户点击操作调用时才有效。(一些)浏览器阻塞点击()从其他上下文,如加载或触发超时(setTimeout)。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function linkDownload(a, filename, content) {
contentType = 'data:application/octet-stream,';
uriContent = contentType + encodeURIComponent(content);
a.setAttribute('href', uriContent);
a.setAttribute('download', filename);
}
function download(filename, content) {
var a = document.createElement('a');
linkDownload(a, filename, content);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
</script>
</head>
<body>
<a href="#" onclick="linkDownload(this, 'test.txt', 'Hello World!');">download</a>
<button onclick="download('test.txt', 'Hello World!');">download</button>
</body>
</html>
好的,创建一个data: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');
就是这样。