javascript - generate - ¿Cómo hacer que un navegador muestre un "guardar como diálogo" para que el usuario pueda guardar el contenido de una cadena en un archivo en su sistema?

save files js

Question

¿Cómo puedo hacer que un navegador muestre un "guardar como diálogo" para que el usuario pueda guardar el contenido de una cadena en un archivo en su sistema?

Por ejemplo:

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

Resultando en algo como esto:

Answer 1

En caso de que alguien todavía se esté preguntando ...

Lo hice así:

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

No puedo recordar mi fuente, pero utiliza las siguientes técnicas / características:

1. Atributo de descarga html5
2. datos de uri

Encontré la referencia:

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

EDITAR: Como puedes deducir de los comentarios, esto NO funciona en

1. Internet Explorer (aunque funciona en Edge v13)
2. Safari
3. iOS Safari
4. mini Opera
5. Navegador de Android (4.3 y menor)

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

Answer 2

Esto es posible utilizando esta implementación javascript de navegador cruzado de la función HTML5 saveAs : https://github.com/koffsyrup/FileSaver.js

Si todo lo que quiere hacer es guardar texto, la secuencia de comandos anterior funciona en todos los navegadores (incluidas todas las versiones de IE), sin usar nada más que JS.

Answer 3

Hay una biblioteca de JavaScript para esto, vea FileSaver.js en Github

Sin embargo, la función saveAs() no enviará cadenas puras al navegador, debe convertirlas en 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;
}

y luego llame a saveAs en blob, como:

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

Por supuesto, recuerde incluir la biblioteca de JavaScript mencionada anteriormente en su página web usando <script src=FileSaver.js>

Answer 4

Usando execComand:

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

En el siguiente enlace: execCommand