En utilisant HTML5/Javascript pour générer et enregistrer un fichier

Question

J'ai été de jongler avec WebGL ces derniers temps, et avoir obtenu un Collada lecteur de travail. Le problème c'est que c'est assez lent (Collada est une très détaillé format), je vais donc commencer la conversion de fichiers vers un plus facile à utiliser le format (probablement JSON). Chose est, j'ai déjà le code pour parser le fichier en Javascript, donc je peut aussi bien l'utiliser comme mon exportateur trop! Le problème est de les sauver.

Maintenant, je sais que je peux analyser le fichier, envoyer le résultat sur le serveur et le navigateur demande le fichier à partir du serveur de téléchargement. Mais en réalité, le serveur n'a rien à voir avec ce processus particulier, alors pourquoi créer? J'ai déjà le contenu du fichier en mémoire. Est-il une manière que je pourrais présenter à l'utilisateur les télécharger à l'aide de javascript? (J'en doute, mais pourrait tout aussi bien demander...)

Et pour être clair: je ne cherche pas à accéder au système de fichiers sans que les utilisateurs des connaissances! L'utilisateur fournira un fichier (probablement par glisser-déposer), le script va transformer le fichier en mémoire, et l'utilisateur sera invité à télécharger le résultat. L'ensemble de ce qui devrait être "sûr" d'activités autant que le navigateur est concerné.

[EDIT]: je n'ai pas mentionné dès le départ, de sorte que les affiches qui ont répondu "Flash" sont valables, mais une partie de ce que je fais est une tentative de mettre en évidence ce qui peut être fait avec de la pure HTML5... donc le Flash est à droite dans mon cas. (Même si c'est une parfaite réponse valable pour tous ceux qui font un "vrai" web app.) Cela étant le cas, il semble que je suis hors de la chance, sauf si je veux faire participer le serveur. Merci quand même!

Answer 1

La solution la plus Simple pour HTML5 prêt navigateurs...

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

L'utilisation de la

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

Answer 2

OK, la création d'un data:URI fait vraiment le truc pour moi, merci à Matthieu et Dennkster soulignant que l'option! Voici en gros comment je le fais:

1) obtenir tout le contenu dans une chaîne de caractères appelée "contenu" (par exemple, par la création il y a d'abord ou par la lecture de innerHTML de la balise qui a déjà construit la page).

2) Construire les données URI:

uriContent = "data:application/octet-stream," + encodeURIComponent(content);

Il y aura des limitations de longueur en fonction de votre type de navigateur, etc., mais par exemple, Firefox 3.6.12 fonctionne au moins jusqu'à 256 ko. L'encodage en Base64 au lieu d'utiliser encodeURIComponent pourrait rendre les choses plus efficaces, mais pour moi c'était ok.

3) ouvrir une nouvelle fenêtre et "rediriger" à cette URI de demande d'un emplacement de téléchargement de mon JavaScript page générée:

 newWindow=window.open(uriContent, 'neuesDokument');

C'est tout.

Answer 3

HTML5 défini un window.saveAs(blob, filename) méthode. Il n'est pas pris en charge par n'importe quel navigateur maintenant. Mais il y a une bibliothèque de compatibilité appelé FileSaver.js qui ajoute cette fonction pour la plupart des navigateurs modernes (y compris Internet Explorer 10+). Internet Explorer 10 prend en charge un navigator.msSaveBlob(blob, filename) méthode (MSDN), qui est utilisé dans FileSaver.js pour Internet Explorer.

J'ai écrit un blog avec plus de détails à propos de ce problème.

Answer 4

function download(content, filename, contentType)
{
    if(!contentType) contentType = 'application/octet-stream';
        var a = document.createElement('a');
        var blob = new Blob([content], {'type':contentType});
        a.href = window.URL.createObjectURL(blob);
        a.download = filename;
        a.click();
}

Answer 5

Jetez un oeil à Doug Neiner de Downloadify qui est une base de mémoire Flash JavaScript interface pour ce faire.

Downloadify est un petit JavaScript + Flash bibliothèque qui permet la génération et l'enregistrement de fichiers à la volée, dans le navigateur, sans serveur d'interaction.