web-dev-qa-db-fra.com

Comment faire en sorte qu'un navigateur affiche une "boîte de dialogue Enregistrer sous" afin que l'utilisateur puisse enregistrer le contenu d'une chaîne dans un fichier de son système?

Comment puis-je faire en sorte qu'un navigateur affiche un "enregistrer en tant que boîte de dialogue" afin que l'utilisateur puisse enregistrer le contenu d'une chaîne dans un fichier de son système?

Par exemple:

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

Il en résulte quelque chose comme ceci:

Example

javascriptsavesavefiledialog
47
MaiaVictor

Au cas où quelqu'un se demanderait encore ...

Je l'ai fait comme ça:

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

je ne me souviens pas de ma source, mais il utilise les techniques suivantes:

  1. attribut de téléchargement html5
  2. données uri

Trouvé la référence:

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

EDIT: Comme vous pouvez le constater à partir des commentaires, cela ne fonctionne pas [~ # ~] [~ # ~]

  1. Internet Explorer (fonctionne dans Edge v13 cependant)
  2. Safari
  3. iOS Safari
  4. Opera Mini
  5. Navigateur Android (4.3 et moins)

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

27
Craig Wayne

Il existe une bibliothèque javascript pour cela, voir FileSaver.js sur Github

Cependant, la fonction saveAs() n'enverra pas de chaîne pure au navigateur, vous devez le convertir 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;
}

puis appelez saveAs sur le blob, comme suit:

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

Bien entendu, n'oubliez pas d'inclure la bibliothèque javascript mentionnée ci-dessus sur votre page Web à l'aide de <script src=FileSaver.js>

10
Tomas M

Ceci est possible en utilisant cette implémentation javascript sur plusieurs navigateurs de la fonction HTML5 saveAs: https://github.com/koffsyrup/FileSaver.js

Si tout ce que vous voulez, c'est sauvegarder du texte, le script ci-dessus fonctionne dans tous les navigateurs (y compris toutes les versions de IE), en n'utilisant que JS.

9
superphonic