25

我有一种情况，我需要让我的用户选择将本地存储在其客户端内存中的一些数据保存到磁盘。我目前的解决方法是有一个这样的处理程序

(define-handler (download-deck) ((deck :json))
  (setf (header-out :content-type) "application/json"
    (header-out :content-disposition) "attachment")
  deck)

这正是它的样子。客户端发送他们的数据，并将返回的文件保存在本地。

这似乎很愚蠢。

请告诉我，有一种更好、更简单、跨浏览器的方法可以让客户端通过文件保存对话框将一些本地数据保存到他们的磁盘上。

我读到的关于这个主题的每个答案要么说“不，你不能用 javascript 保存文件”，要么是“是的，Chrome API 有一个半文档化的部分，可以让你在三页内完成”。

4

3 回答 3

31

这个“FileSaver”库可能会有所帮助。如果您希望它合理地跨浏览器，您还需要它来在尚未实现的地方实现 W3C Blob API。两者都尊重命名空间，并且完全与框架无关，因此不必担心命名问题。

一旦你包含了这些，只要你只保存文本文件，你应该能够

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");

请注意，第一个参数必须new Blob是字符串列表，并且您需要指定文件名。如在，用户将看到这个文件正在本地下载，但不能自己命名。希望他们使用的是处理本地文件名冲突的浏览器......

于 2013-09-09T02:45:50.480 回答
12

这是我的代码：

<a id='tfa_src_data'>Export</a>

document.getElementById('tfa_src_data').onclick = function() {                  
                        var csv = JSON.stringify(localStorage['savedCoords']);
                        var csvData = 'data:application/csv;charset=utf-8,' 
                                       + encodeURIComponent(csv);
                        this.href = csvData;
                        this.target = '_blank';
                        this.download = 'filename.txt';
                    };

您可以使用各种数据类型。

于 2014-08-25T15:06:48.493 回答
2

根据您尝试执行的操作，HTML5 本地存储概念可能会对您有所帮助。

那么什么是 HTML5 存储？简而言之，这是网页在客户端 Web 浏览器中本地存储命名键/值对的一种方式。与 cookie 一样，即使您离开网站、关闭浏览器选项卡、退出浏览器或您拥有什么，这些数据也会持续存在。与 cookie 不同，此数据永远不会传输到远程 Web 服务器（除非您特意手动发送）。http://diveintohtml5.info/storage.html

还有文件系统 API（目前仅在 Chrome AFAIK 中实现） http://www.html5rocks.com/en/tutorials/file/filesystem/

于 2013-09-09T01:52:22.307 回答