使用 HTML5/JavaScript 生成和保存文件

javascript html download

2022-08-29 23:42:21

我最近一直在摆弄WebGL，并得到了一个Collada阅读器。问题是它非常慢（Collada是一种非常详细的格式），所以我将开始将文件转换为更易于使用的格式（可能是JSON）。我已经有了用JavaScript解析文件的代码，所以我也可以把它作为我的导出器！问题是保存。

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

需要明确的是：我不会在用户不知情的情况下尝试访问文件系统！用户将提供一个文件（可能通过拖放），脚本将在内存中转换文件，并提示用户下载结果。就浏览器而言，所有这些都应该是“安全”的活动。

[编辑]：我没有提前提到它，所以回答“Flash”的海报足够有效，但我正在做的一部分是试图强调纯HTML5可以做些什么......所以Flash在我的情况下是正确的。（尽管对于任何做“真实”Web应用程序的人来说，这都是一个完全有效的答案。在这种情况下，除非我想让服务器参与进来，否则看起来我运气不好。无论如何，谢谢！

答案 1

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();
    }
}

用法

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

答案 2

好吧，创建一个data：URI绝对可以帮我解决问题，这要归功于Matthew和Dennkster指出了这个选项！以下是我基本上是这样做的：

1）将所有内容放入一个名为“content”的字符串中（例如，通过最初在那里创建它或通过读取已经构建的页面的标签的innerHTML）。

2）构建数据 URI：

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

根据浏览器类型等，会有长度限制，但例如Firefox 3.6.12工作到至少256k。使用Base64而不是使用codenURIComponent进行编码可能会使事情更有效率，但对我来说这没关系。

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

newWindow = window.open(uriContent, 'neuesDokument');

就是这样。