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

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

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

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


当前回答

简单的解决方案!

<a download=“My-FileName.txt” href=“data:application/octet-stream,HELLO-WORLDDDDDDDD”>点击这里</a>

适用于所有现代浏览器。

其他回答

下面是一个将文件导出为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

try

let a = document.createElement('a'); a.href = "data:application/octet-stream,"+encodeURIComponent('我的数据'); a.download = 'myFile.json'; a.click ();//我们不添加'a'到DOM,所以不需要删除

如果你想下载二进制数据,看这里

更新

2020.06.14我将Chrome升级到83.0及以上SO代码片段停止工作(由于沙箱安全限制)-但JSFiddle版本工作-在这里

HTML5定义了一个窗口。saveAs(blob, filename)方法。目前任何浏览器都不支持它。但是,有一个名为filesver .js的兼容性库将此功能添加到大多数现代浏览器(包括Internet Explorer 10+)。Internet Explorer 10支持导航器。msSaveBlob(blob, filename)方法(MSDN),在filesver .js中用于Internet Explorer支持。

我写了一篇关于这个问题的详细博文。

对于像“txt”或“js”这样的简单文件,您可以使用fs-浏览器包。 它有很好的和简单的下载和导出方法的客户端,不涉及任何服务器。

import {exportFile} from 'fs-browsers'; const onExportClick = (textToExport) => { //导出到txt文件 exportFile (textToExport); }

如果你想改变文件的名称,甚至它的类型,你可以很容易地用这个:

import {exportFile} from 'fs-browsers'; const onExportClick = (textToExport) => { //导出到js文件file.js exportFile(textToExport, {fileName: 'file.js'}); }

对于更复杂的文件,您将需要使用服务器。 如果这是你需要的,这个包也可以对excel文件('xls')这样做。

import {exportFile, EXCEL_FILE} from 'fs-browsers'; 常量数据= [{" id ": 5,“名字”:“约翰”,“等级”:90年,“年龄”:15},{" id ": 7,“名字”:“尼克”、“年级”:70年,“年龄”:17}); const heading =["学号","学生姓名","考试等级","学生年龄"]; exportFile(数据,{类型:EXCEL_FILE,标题:标题,文件名:'grades.xls'});

也许将来还会有其他类型的文件。

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

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