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

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

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

一旦你有了这些,只要你只保存文本文件,你应该能够

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

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

Answer 2

这是我的代码:

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

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