Javascript 如何让浏览器显示“另存为对话框”以便用户可以将字符串的内容保存到其系统上的文件中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11336663/
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 make a browser display a "save as dialog" so the user can save the content of a string to a file on his system?
提问by MaiaVictor
How can I make a browser display a "save as dialog" so the user can save the content of a string to a file on his system?
如何让浏览器显示“另存为对话框”，以便用户可以将字符串的内容保存到其系统上的文件中？
For example:
例如：
var myString = "my string with some stuff";
save_to_filesystem(myString,"myString.txt");
Resulting in something like this:
结果是这样的：
采纳答案by Craig Wayne
In case anyone is still wondering...
万一有人还在想...
I did it like this:
我是这样做的：
<a href="data:application/xml;charset=utf-8,your code here" download="filename.html">Save</a>
<a href="data:application/xml;charset=utf-8,your code here" download="filename.html">Save</a>
cant remember my source but it uses the following techniques\features:
不记得我的来源，但它使用以下技术\功能：
- html5 download attribute
- data uri's
- html5下载属性
- 数据uri
Found the reference:
找到参考：
http://paxcel.net/blog/savedownload-file-using-html5-javascript-the-download-attribute-2/
http://paxcel.net/blog/savedownload-file-using-html5-javascript-the-download-attribute-2/
EDIT: As you can gather from the comments this does NOTwork in
编辑：你可以从注释收集但这不工作，
- Internet Explorer (works in Edge v13 though)
- iOS Safari
- Opera Mini
- Internet Explorer（不过适用于 Edge v13）
- iOS Safari
- 歌剧迷你
回答by Tomas M
There is a javascript library for this, see FileSaver.js on Github
有一个 javascript 库，请参阅Github 上的 FileSaver.js
However the saveAs()function won't send pure string to the browser, you need to convert it to blob:
但是该saveAs()函数不会将纯字符串发送到浏览器，您需要将其转换为blob：
function data2blob(data, isBase64) {
var chars = "";
if (isBase64)
chars = atob(data);
else
chars = data;
var bytes = new Array(chars.length);
for (var i = 0; i < chars.length; i++) {
bytes[i] = chars.charCodeAt(i);
}
var blob = new Blob([new Uint8Array(bytes)]);
return blob;
}
and then call saveAson the blob, as like:
然后调用saveAsblob，如下所示：
var myString = "my string with some stuff";
saveAs( data2blob(myString), "myString.txt" );
Of course remember to include the above-mentioned javascript library on your webpage using <script src=FileSaver.js>
当然记得在你的网页上使用上面提到的 javascript 库 <script src=FileSaver.js>
回答by superphonic
This is possible using this cross browser javascript implementation of the HTML5 saveAsfunction: https://github.com/koffsyrup/FileSaver.js
这可以使用 HTML5saveAs函数的跨浏览器 javascript 实现：https: //github.com/koffsyrup/FileSaver.js
If all you want to do is save text then the above script works in all browsers(including all versions of IE), using nothing but JS.
如果您只想保存文本，那么上述脚本适用于所有浏览器（包括所有版本的 IE），只使用 JS。
回答by Timmmm
There is a new spec called the Native File System APIthat allows you to do this properly like this:
有一个名为Native File System API的新规范，它允许您像这样正确地执行此操作：
const result = await window.chooseFileSystemEntries({ type: "save-file" });
There is a demo here, but I believe it is using an origin trial so it may not work in your own website unless you sign up or enable a config flag, and it obviously only works in Chrome. If you're making an Electron app this might be an option though.
有一个演示在这里，但我相信，除非您注册或启用一个配置参数，它显然是利用原点审讯所以它可能不会在自己的网站工作，只在Chrome工作。如果你正在制作一个 Electron 应用程序，这可能是一个选择。
回答by jfraber
Using execComand:
使用 exec 命令：
<input type="button" name="save" value="Save" onclick="javascript:document.execCommand('SaveAs','true','your_file.txt')">
In the next link: execCommand
在下一个链接中： execCommand
