javascript - 如何使用 JavaScript 保存和编辑文件？

Question

我希望我网站的用户在文本区域中输入一些文本，当他提交表单时，他输入的文本存储在当前网页同一目录中的 .txt 文件中？我完全不知道它是如何完成的，甚至不知道它是否可以用 JavaScript 完成。

怎么做到的？

Answer 1

是的，HTML5 文件 API 有一个 saveAs API，可用于使用 Javascript 保存二进制数据。您可以通过首先将数据放入 Canvas 并将其另存为来生成 .txt 文件:

canvas.toBlob(function(blob) {
  saveAs(blob, filename);
});

看这个demo，其实是在没有PHP的情况下在浏览器中生成的文本文件。 http://eligrey.com/demos/FileSaver.js/

Eli Gray 于 2011 年在 html5rocks 上写了一篇很棒的文章:http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side

W3C 的更多阅读:Filesaver interface

---

编辑 2016 年更新

我的原始答案显示了一个使用 BlobBuilder 接口(interface)的示例，此后一直是 deprecated and marked as obsolete .现在推荐使用Blob Construct操作二进制数据。

在发布时，Blob 结构是 supported on all major browsers . IE 11、Edge 13、Firefox 43、Chrome 45、Safari 9、Opera 35、iOS Safari 8.4、Android Chrome 49。

演示:

• Koldev 发布了 jsfiddle 如何使用这个新结构来保存 json 文件。
• 链接:https://jsfiddle.net/koldev/cW7W5/

更多阅读:

• MDN Blob Documentation
• Caniuse Blob construction