我最近一直在摆弄WebGL，并得到了一个Collada阅读器工作。问题是它非常慢(Collada是一种非常冗长的格式)，所以我将开始将文件转换为更容易使用的格式(可能是JSON)。我已经有代码来解析JavaScript文件，所以我不妨使用它作为我的出口商太!问题在于储蓄。
现在，我知道我可以解析文件，将结果发送到服务器，并让浏览器从服务器请求返回文件作为下载。但实际上，服务器与这个特定的进程没有任何关系，那么为什么要把它牵扯进来呢?我在内存中已经有了所需文件的内容。是否有任何方法可以使用纯JavaScript向用户提供下载?(我对此表示怀疑，但不妨问问……)
需要明确的是:我不会在用户不知情的情况下访问文件系统!用户将提供一个文件(可能通过拖放)，脚本将转换内存中的文件，并提示用户下载结果。就浏览器而言，所有这些都应该是“安全”的活动。
[编辑]:我没有在前面提到它，所以那些回答“Flash”的帖子是有道理的，但我所做的部分工作是试图强调纯HTML5可以做什么……所以闪电侠正好适合我。(尽管这对于任何制作“真正的”web应用程序的人来说都是一个非常有效的答案)在这种情况下，除非我想要涉及服务器，否则我看起来很不走运。谢谢!
在测试“ahref”方法时，我发现Firefox和Chrome的web开发工具很容易混淆。我需要在a.click()发出后重新启动调试。FileSaver也发生了同样的情况(它使用相同的ahref方法进行实际保存)。为了解决这个问题，我创建了一个新的临时窗口，将元素a添加到其中，并单击它。
function download_json(dt) {
var csv = ' var data = ';
csv += JSON.stringify(dt, null, 3);
var uricontent = 'data:application/octet-stream,' + encodeURI(csv);
var newwin = window.open( "", "_blank" );
var elem = newwin.document.createElement('a');
elem.download = "database.js";
elem.href = uricontent;
elem.click();
setTimeout(function(){ newwin.close(); }, 3000);
}
对于像“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'});
也许将来还会有其他类型的文件。
我发现了两种简单的方法。首先，使用已单击的元素并注入下载数据。其次，使用下载数据生成一个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>
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!');
