Comment créer un fichier en mémoire que l'utilisateur pourra télécharger au lieu de passer par le serveur ?

Question

Existe-t-il un moyen de créer un fichier texte côté client et d'inviter l'utilisateur à le télécharger sans aucune interaction avec le serveur ?

Je sais que je ne peux pas écrire directement sur leur ordinateur (sécurité, etc.), mais puis-je créer le fichier et l'inviter à l'enregistrer ?

Answer 1

Une solution simple pour les navigateurs HTML5...

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

form * {
  display: block;
  margin: 10px;
}

<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea name="text"></textarea>
  <input type="submit" value="Download">
</form>

Utilisation

download('test.txt', 'Hello world!');

Answer 2

Vous pouvez utiliser l'URI des données. La prise en charge du navigateur varie ; voir Wikipedia. Exemple :

<a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>

Flux d'octets pour forcer les invites de téléchargement. Sinon, il risque de s'ouvrir dans le navigateur.

Pour CSV, vous pouvez utiliser :

<a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV Octet</a>

Essayez la démo jsFiddle.