69

如何使浏览器显示“另存为对话框”，以便用户可以将字符串的内容保存到他系统上的文件中？

例如：

var myString = "my string with some stuff";
save_to_filesystem(myString,"myString.txt");

导致这样的事情：

例子

4

6 回答 6

40

万一有人还在想...

我是这样做的：

<a href="data:application/xml;charset=utf-8,your code here" download="filename.html">Save</a>

不记得我的来源，但它使用以下技术\功能：

  1. html5下载属性
  2. 数据 URI

找到参考：

http://paxcel.net/blog/savedownload-file-using-html5-javascript-the-download-attribute-2/

编辑：正如您可以从评论中收集的那样，这不起作用

  1. Internet Explorer（但适用于 Edge v13 及更高版本）
  2. 歌剧迷你

http://caniuse.com/#feat=download

于 2014-03-20T10:54:46.407 回答
17

有一个名为Native File System API的新规范允许您像这样正确地执行此操作：

const result = await window.chooseFileSystemEntries({ type: "save-file" });

这里有一个演示，但我相信它正在使用原始试用版，因此它可能无法在您自己的网站上运行，除非您注册或启用配置标志，而且它显然只能在 Chrome 中运行。如果你正在制作一个 Electron 应用程序，这可能是一个选择。

于 2020-05-01T13:03:31.600 回答
16

有一个 javascript 库，请参阅Github 上的 FileSaver.js

但是该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;
}

然后调用saveAsblob，如下所示：

var myString = "my string with some stuff";
saveAs( data2blob(myString), "myString.txt" );

当然记得在你的网页上使用上面提到的 javascript 库<script src=FileSaver.js>

于 2015-04-15T13:00:16.550 回答
10

这可以使用 HTML5saveAs函数的跨浏览器 javascript 实现：https ://github.com/koffsyrup/FileSaver.js

如果您只想保存文本，那么上述脚本适用于所有浏览器（包括所有版本的 IE），只使用 JS。

于 2015-05-28T13:17:25.260 回答
9

仅使用 javascript 的解决方案

function saveFile(fileName,urlFile){
    let a = document.createElement("a");
    a.style = "display: none";
    document.body.appendChild(a);
    a.href = urlFile;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
    a.remove();
}

let textData = `El contenido del archivo
que sera descargado`;
let blobData = new Blob([textData], {type: "text/plain"});
let url = window.URL.createObjectURL(blobData);
//let url = "pathExample/localFile.png"; // LocalFileDownload
saveFile('archivo.txt',url);
于 2020-10-14T00:49:49.250 回答
-7

使用执行命令：

<input type="button" name="save" value="Save" onclick="javascript:document.execCommand('SaveAs','true','your_file.txt')">

在下一个链接中： execCommand

于 2015-04-01T22:24:35.590 回答