Créez un fichier dans la mémoire pour l’utilisateur de télécharger, pas par l’intermédiaire de serveur

Question

Est-il possible que je puisse créer un fichier texte sur le côté client et invite l’utilisateur à télécharger, sans aucune interaction avec le serveur ? Je sais que je ne peux pas écrire directement sur leur ordinateur (sécurité et tout), mais puis-je créer et les inciter à l’enregistrer ?

Answer 1

Solution simple pour les prêts navigateurs HTML5...

<div class="snippet" data-hide="false" data-lang="js"> <div class="snippet-code">

</div></div>Son utilisation

Answer 2

Vous pouvez utiliser les données URIs. Prise en charge navigateur varie ; Voir Wikipedia. Exemple :

Le flux d’octets est de forcer une invite de téléchargement. Dans le cas contraire, il sera probablement ouvrir dans le navigateur.

Pour CSV, essayez :

Essayez la démo de jsFiddle.

Answer 3

Tout l'exemple ci-dessus fonctionne très bien en chrome et IE, mais échoue dans Firefox. S'il vous plaît pensez à ajouter l'ancre au corps et retirez-le après un clic.

 var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(['Test,Text'], {type: 'text/csv'}));
a.download = 'test.csv';

// Append anchor to body.
document.body.appendChild(a)
a.click();

// Remove anchor from body
document.body.removeChild(a)
 

Answer 4

Je suis heureux d'utiliser FileSaver.js . Sa compatibilité est assez bonne (IE10 + et tout le reste), et c'est très simple à utiliser:

 var blob = new Blob(["some text"], {
    type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");
 

Answer 5

La méthode suivante fonctionne dans IE11 +, Firefox 25 + et Chrome 30 + :

Voir cela en Action : http://jsfiddle.net/Kg7eA/

Firefox et Chrome prend en charge les données URI pour la navigation, qui permet de créer des fichiers en accédant à une URI, de données, alors que IE ne le supporte pas pour des raisons de sécurité.

En revanche, c’est à dire a API pour sauver un blob, qui peut être utilisé pour créer et télécharger des fichiers.