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

我最近一直在摆弄WebGL，并得到了一个Collada阅读器工作。问题是它非常慢(Collada是一种非常冗长的格式)，所以我将开始将文件转换为更容易使用的格式(可能是JSON)。我已经有代码来解析JavaScript文件，所以我不妨使用它作为我的出口商太!问题在于储蓄。

现在，我知道我可以解析文件，将结果发送到服务器，并让浏览器从服务器请求返回文件作为下载。但实际上，服务器与这个特定的进程没有任何关系，那么为什么要把它牵扯进来呢?我在内存中已经有了所需文件的内容。是否有任何方法可以使用纯JavaScript向用户提供下载?(我对此表示怀疑，但不妨问问……)

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

[编辑]:我没有在前面提到它，所以那些回答“Flash”的帖子是有道理的，但我所做的部分工作是试图强调纯HTML5可以做什么……所以闪电侠正好适合我。(尽管这对于任何制作“真正的”web应用程序的人来说都是一个非常有效的答案)在这种情况下，除非我想要涉及服务器，否则我看起来很不走运。谢谢!

当前回答

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

2013-08-12 22:11:19

其他回答

简单的解决方案!

适用于所有现代浏览器。

2016-08-26 11:55:22

这里有一个链接到Mathew建议的数据URI方法，它在safari上工作，但不是很好，因为我不能设置文件类型，它被保存为“未知”，然后我不得不再次去那里，改变它，以便查看文件…

http://www.nihilogic.dk/labs/canvas2image/

2010-09-14 14:41:18

您可以使用localStorage。这相当于Html5中的cookie。它似乎可以在Chrome和Firefox上运行，但在Firefox上，我需要将它上传到服务器上。也就是说，直接在我的家用电脑上测试不起作用。

我正在做HTML5的例子。访问http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html 转到迷宫一。重建迷宫的信息使用localStorage存储。

我读这篇文章是为了寻找用于加载和处理xml文件的HTML5 JavaScript。它是否与旧的html和JavaScript相同????

2010-06-01 19:03:37

function download(content, filename, contentType)
{
    if(!contentType) contentType = 'application/octet-stream';
        var a = document.createElement('a');
        var blob = new Blob([content], {'type':contentType});
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.click();
}

2013-10-07 17:03:17

下面是一个将文件导出为ZIP的教程:

在开始之前，有一个库来保存文件，库的名字是filesver .js，你可以在这里找到这个库。让我们开始吧，现在，包括所需的库:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js" ></script>

现在复制这段代码，这段代码将下载一个带有Hello .txt文件的zip文件，其中包含Hello World的内容。如果一切正常，这将下载一个文件。

<script type="text/javascript">
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    zip.generateAsync({type:"blob"})
    .then(function(content) {
        // see FileSaver.js
        saveAs(content, "file.zip");
    });
</script>

这将下载一个名为file.zip的文件。你可以在这里阅读更多:http://www.wapgee.com/story/248/guide-to-create-zip-files-using-javascript-by-using-jszip-library

2017-09-30 09:46:41

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

推荐文章

最新文章

标签