javascript 如何从客户端浏览器中的内容生成并提示保存文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18690450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to generate and prompt to save a file from content in the client browser?
提问by Inaimathi
I have a situation where I need to give my users the option to save some data stored locally in their client memory to disk. The current workaround I have is having a handler like this
我有一种情况，我需要让我的用户选择将一些本地存储在其客户端内存中的数据保存到磁盘。我目前的解决方法是有一个这样的处理程序
(define-handler (download-deck) ((deck :json))
(setf (header-out :content-type) "application/json"
(header-out :content-disposition) "attachment")
deck)
which does exactly what it looks like. The client sends their data up, and saves the returned file locally.
这正是它看起来的样子。客户端发送他们的数据，并将返回的文件保存在本地。
This seems stupid.
这似乎很愚蠢。
Please, pleasetell me there's a better, simpler, cross-browser way to let a client save some local data to their disk with a file-save dialog box.
拜托，请告诉我有一个更好的，更简单的，跨浏览器的方式，让客户节省一些本地数据到他们与文件保存对话框盘。
Every answer I read on the subject either says "no, you can't save files with javascript" or "yes, there's this one semi-documented piece of the Chrome API that might let you do it in three pages".
我读到的关于这个主题的每个答案要么说“不，你不能用 javascript 保存文件”或“是的，Chrome API 的这个半文档部分可以让你在三页中完成”。
回答by Dave
This "FileSaver" library may help. If you want it to be reasonably cross-browser, you'll also need thisto implement the W3C Blob API in places it's not already implemented. Both respect namespaces, and are completely framework agnostic, so don't worry about naming issues.
这个“FileSaver”库可能会有所帮助。如果您希望它合理地跨浏览器，您还需要它来在尚未实现的地方实现 W3C Blob API。两者都尊重命名空间，并且完全与框架无关，所以不用担心命名问题。
Once you've got those included, and as long as you're only saving text files, you should be able to
一旦你包含了这些，只要你只保存文本文件，你应该能够
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");
Note that the first argument to new Blobhas to be a list of strings, and that you're expected to specify the filename. As in, the user will see this file being downloaded locally, but won't be able to name it themselves. Hopefully they're using a browser that handles local filename collisions...
请注意， to 的第一个参数必须new Blob是字符串列表，并且您需要指定文件名。如在，用户将看到此文件正在本地下载，但无法自己命名。希望他们使用的浏览器可以处理本地文件名冲突......
回答by tomasb
This is my code:
这是我的代码：
<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';
};
You can use various data types.
您可以使用各种数据类型。
回答by KarlM
Depending on what you are trying to do exactly, the HTML5 local storage concept might help you.
HTML5 本地存储概念可能会对您有所帮助，具体取决于您尝试执行的操作。
So what is HTML5 Storage? Simply put, it's a way for web pages to store named key/value pairs locally, within the client web browser. Like cookies, this data persists even after you navigate away from the web site, close your browser tab, exit your browser, or what have you. Unlike cookies, this data is never transmitted to the remote web server (unless you go out of your way to send it manually). http://diveintohtml5.info/storage.html
那么什么是 HTML5 存储？简而言之，它是网页在客户端 Web 浏览器中本地存储命名键/值对的一种方式。与 cookie 一样，即使在您离开网站、关闭浏览器选项卡、退出浏览器或其他任何内容后，这些数据仍然存在。与 cookie 不同的是，此数据永远不会传输到远程 Web 服务器（除非您特意手动发送）。http://diveintohtml5.info/storage.html
There's also the Filesystem API (so far only implemented in Chrome AFAIK) http://www.html5rocks.com/en/tutorials/file/filesystem/
还有文件系统 API（目前仅在 Chrome AFAIK 中实现） http://www.html5rocks.com/en/tutorials/file/filesystem/
