如何使瀏覽器顯示“另存為對話框”，以便用戶可以將字符串的內容保存到系統上的文件中？

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. 歌劇迷你

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;
}

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

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

當然記得使用<script src=FileSaver.js>在您的網頁上包含上述 javascript 庫

Answer 4

這可以使用 HTML5 saveAs函數的跨瀏覽器 javascript 實現： https ://github.com/koffsyrup/FileSaver.js

如果您只想保存文本，那么上述腳本適用於所有瀏覽器（包括所有版本的 IE），只使用 JS。

Answer 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);

Answer 6

使用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 7

使用執行命令：

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

在下一個鏈接中： execCommand