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

Posted 2023-05-07

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

【英文标题】：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?

【发布时间】：2012-07-05 00:38:07

【问题描述】：

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

例如：

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

结果如下：

【问题讨论】：

你会在这里找到答案：***.com/questions/2897619/…

@ArnarYngvason 这与在 angularjs 中执行此操作的过程相同吗？

@bleykFaust，所有前端 js 应用程序的过程都是相同的。

【参考方案1】：

万一有人还在想……

我是这样做的：

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

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

html5下载属性 数据 URI 的

找到参考：

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

---

编辑： 正如您从 cmets 收集到的那样，这不在

中起作用

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

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

【讨论】：

截至 2019 年 1 月，它适用于（非 ios）Safari、android 浏览器。仍然没有 iOS Safari、Opera Mini 或 IE caniuse.com/#feat=download

@SeanKPS 你能强制它提示用户保存它的文件夹，尽管浏览器设置？

嗯，它现代，简短，而且有效。但是，它不再提供“另存为...”对话框。我希望用户能够在保存之前更改文件名。

在 win7 chrome 79 中，依赖于浏览器设置。如果用户取消选中“下载前询问每个文件的保存位置”，它将直接下载。

现在（2021 年 5 月）的最佳方法似乎是此处详述的文件系统访问 API：web.dev/file-system-access

【参考方案2】：

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

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

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

【讨论】：

在 2021 年 5 月解决这个问题，这似乎是最简单的方法：developer.mozilla.org/en-US/docs/Web/API/Window/…。请注意，自原始帖子以来，API 已更改。另请参阅这篇有用的文章：web.dev/file-system-access

这在大多数浏览器中尚不可用。

【参考方案3】：

对此有一个 javascript 库，请参阅FileSaver.js on Github

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

然后在 blob 上调用 saveAs，如下所示：

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

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

【讨论】：

这只是将“myString.txt”保存到我的下载文件夹，而不显示对话框。

啊，不，我没有！它们都自动保存。那么这是否始终是每个浏览器的功能，还是有办法通过脚本触发行为？

我相信这是每个​​浏览器的功能。在chrome中，您可以在设置、高级设置、复选框“下载前询问每个文件的保存位置”中进行设置

正常情况下无法获得 Win32 SaveAs 对话框。最好的方法是使用用户输入的文件名。

【参考方案4】：

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

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

【参考方案5】：

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

【参考方案6】：

使用 execCommand：

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

在下一个链接中： execCommand