如何从客户端浏览器的内容中生成并提示保存文件？ [复制]

Question

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

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

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

这似乎很愚蠢。

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

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

Answer 1

根据您想要做什么，HTML5 本地存储概念可能会对您有所帮助。

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

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

Answer 2

This "FileSaver" library may help。如果您希望它合理地跨浏览器，您还需要this 在尚未实现的地方实现 W3C Blob API。两者都尊重命名空间，并且完全与框架无关，所以不用担心命名问题。

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

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

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

Answer 3

这是我的代码：

<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';
                    };

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