我可以使用 javascript 在本地创建和保存一个巨大的文件吗？

Posted 2023-05-07

【中文标题】我可以使用 javascript 在本地创建和保存一个巨大的文件吗？

【英文标题】：Can I use javascript to locally create and save a humongous file?

【发布时间】：2015-02-23 17:44:12

【问题描述】：

我想使用 javascript 在客户端创建和保存一个大的 .csv 文件。这已经被问过和回答过（例如，参见1、2、3 或4），这归结为两种方法（除其他外）：

使用FileSaver.js实现w3c的saveAs()：

var lines = ["line 1,cell 11,cell 12\n","line 2,cell 21,cell 22\n"];
var type = "text/csv;charset=utf-8";
var blob = new Blob(lines,"type":type);
saveAs(blob,"download.csv");

使用a[download] 和数据uri：

var lines = ["line 1,cell 11,cell 12\n","line 2,cell 21,cell 22\n"];
var type = "text/csv;charset=utf-8";
var downloader = $('<a download href="data:'+type+','+escape(lines.join(''))+'"></a>')
    .appendTo("body")
downloader[0].click();
downloader.remove();

我的问题是我的文件可能很大：1800 万行和 2.5 Gb（我希望能够处理更多）。创建lines 会占用过多内存并导致站点崩溃。但是没有理由将lines 存储在浏览器的内存中只是为了将其保存到硬盘上。有没有办法使用javascript创建渐进式下载（换句话说，开始下载但在我计算它们时继续附加行）？还是我唯一的选择是将文件作为单独的块下载，然后用户必须将它们连接在一起？

【问题讨论】：

虽然问题写得很好且结构合理，但我认为可能的答案过于基于意见。

@Jonast92 如果我的问题是“我的哪种方法更好”，我会同意这种观点过于基于意见。但我的问题是“我想做什么”，这似乎不是基于意见的（IMO）。

我明白了。也许最好的解决方案是简单地尝试两者并通过查看一些基准来查看哪个更合适，然后你就会知道答案，至少对于你的场景，你可以分享它世界！ :) --虽然我明白你想通过等待答案来腾出一些时间，但你可能不应该指望它。

@Jonast92 我不确定你是否理解我。我已经尝试了这两种方法。谷歌浏览器报告说标签的内存达到 1.5 Gb，cpu 达到 135-140（不管这意味着什么），标签崩溃，大概是因为 lines 太大了。因此，我希望将文件保存到我的硬盘驱动器而不在 javascript 的内存中创建整个对象。像blob=new Blob(); saveAs(blob); blob.append(lines); 这样的顺序。

【参考方案1】：

如果您使用的是 html5，您可以尝试使用 FileSytem API。有关该主题的信息，请参阅 here，有关如何从客户端创建和访问文件的更实际示例，请参阅 here。

【讨论】：

我确实在使用html5。感谢您的链接，html5rocks 似乎提供了更多示例。但不幸的是，FileSystem has been discontinued 似乎是这样，我预计对这种方法的支持只会在未来减少。

FileSystem API 没有完全支持，只有 Chrome、Opera 和一些移动浏览器支持它（基本上是基于 Webkit 的浏览器）。由于您的应用程序并不常见，我认为这个建议可能对您有用，并且浏览器支持可能会在您的列表中排在第二位，在能够在客户端上生成这些大文件之后。

文件系统已经停产，但他们不太可能将其删除。太多的网络应用程序依赖它，甚至 chrome 扩展都使用它。