如何让浏览器显示"另存为对话框",以便用户可以将字符串的内容保存到系统中的文件中？

Question

如何让浏览器显示"另存为对话框",以便用户可以将字符串的内容保存到系统中的文件中？

例如:

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

结果是这样的:

Answer 1

万一有人还在想......

我是这样做的:

<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. 苹果浏览器
3. iOS Safari
4. Opera Mini
5. Android浏览器(4.3及更低版本)

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

Answer 2

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

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

有一个演示在这里，但我相信，除非您注册或启用一个配置参数，它显然是利用原点审讯所以它可能不会在自己的网站工作，只在Chrome工作。如果你正在制作一个 Electron 应用程序，这可能是一个选择。

Answer 3

有一个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>

Answer 4

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

如果你想要的只是保存文本,那么上面的脚本适用于所有浏览器(包括所有版本的IE),只使用JS.

Answer 5

使用showSaveFilePicker()：

const handle = await showSaveFilePicker({
    suggestedName: 'name.txt',
    types: [{
        description: 'Text file',
        accept: {'text/plain': ['.txt']},
    }],
});

const blob = new Blob(['Some text']);

const writableStream = await handle.createWritable();
await writableStream.write(blob);
await writableStream.close();

Answer 6

仅使用 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);