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



Answers

Solution simple pour les navigateurs compatibles HTML5

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

    if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
    }
    else {
        pom.click();
    }
}

Usage

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

J'ai récemment tripoté WebGL et j'ai fait travailler un lecteur de Collada. Le problème est qu'il est assez lent (Collada est un format très verbeux), donc je vais commencer à convertir les fichiers en un format plus facile à utiliser (probablement JSON). La chose est, j'ai déjà le code pour analyser le fichier en Javascript, donc je peux aussi bien l'utiliser comme mon exportateur aussi! Le problème est l'économie.

Maintenant, je sais que je peux analyser le fichier, envoyer le résultat au serveur et demander au navigateur de demander le téléchargement du fichier à partir du serveur. Mais en réalité, le serveur n'a rien à voir avec ce processus particulier, alors pourquoi l'impliquer? J'ai déjà le contenu du fichier désiré en mémoire. Y at-il un moyen que je pourrais présenter à l'utilisateur avec un téléchargement en utilisant javascript pure? (J'en doute, mais pourrait aussi bien demander ...)

Et pour être clair: je n'essaie pas d'accéder au système de fichiers sans la connaissance des utilisateurs! 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. Tout ce qui devrait être des activités «sécuritaires» en ce qui concerne le navigateur.

[EDIT]: Je ne l'ai pas mentionné d'emblée, donc les affiches qui ont répondu "Flash" sont assez valides, mais une partie de ce que je fais est une tentative pour mettre en évidence ce qui peut être fait avec du HTML5 pur ... tout de suite dans mon cas. (Bien que ce soit une réponse parfaitement valide pour quiconque fait une "vraie" application web.) Cela étant, il semble que je n'ai pas de chance, sauf si je veux impliquer le serveur. Merci quand même!




Vous pouvez générer une URI de données . Cependant, il existe des limitations spécifiques au navigateur.




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();
}



Vous pouvez utiliser localStorage. C'est l'équivalent Html5 des cookies. Il semble fonctionner sur Chrome et Firefox MAIS sur Firefox, j'avais besoin de le télécharger sur un serveur. Autrement dit, tester directement sur mon ordinateur à la maison n'a pas fonctionné.

Je travaille sur des exemples HTML5. Allez à http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html et http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html défiler jusqu'à la labyrinthe. Les informations permettant de reconstruire le labyrinthe sont stockées à l'aide de localStorage.

Je suis venu à cet article à la recherche de HTML5 JavaScript pour charger et travailler avec des fichiers XML. Est-ce la même chose que les anciens html et JavaScript ????




Voici un tutoriel pour exporter des fichiers en ZIP:

Avant de commencer, il y a une bibliothèque pour enregistrer des fichiers, le nom de la bibliothèque est fileSaver.js, Vous pouvez trouver cette bibliothèque ici. Commençons, Maintenant, incluez les bibliothèques requises:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.js" ></script>

Maintenant, copiez ce code et ce code va télécharger un fichier zip avec un fichier hello.txt ayant du contenu Hello World. Si tout fonctionne correctement, cela va télécharger un fichier.

<script type="text/javascript">
    var zip = new JSZip();
    zip.file("Hello.txt", "Hello World\n");
    zip.generateAsync({type:"blob"})
    .then(function(content) {
        // see FileSaver.js
        saveAs(content, "file.zip");
    });
</script>

Cela va télécharger un fichier appelé fichier.zip. Vous pouvez en lire plus ici: http://www.wapgee.com/story/248/guide-to-create-zip-files-using-javascript-by-using-jszip-library




J'ai trouvé deux approches simples qui fonctionnent pour moi. Tout d'abord, en utilisant a élément déjà cliqué et en injectant les données de téléchargement. Et deuxièmement, générer a élément avec les données de téléchargement, en exécutant a.click() et en le supprimant à nouveau. Mais la seconde approche ne fonctionne que si elle est invoquée par une action de clic de l'utilisateur. (Some) Le bloc du navigateur click() partir d'autres contextes comme lors du chargement ou déclenché après un timeout (setTimeout).

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function linkDownload(a, filename, content) {
        contentType =  'data:application/octet-stream,';
        uriContent = contentType + encodeURIComponent(content);
        a.setAttribute('href', uriContent);
        a.setAttribute('download', filename);
      }
      function download(filename, content) {
        var a = document.createElement('a');
        linkDownload(a, filename, content);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    </script>
   </head>
  <body>
    <a href="#" onclick="linkDownload(this, 'test.txt', 'Hello World!');">download</a>
    <button onclick="download('test.txt', 'Hello World!');">download</button>
  </body>
</html>



Jetez un oeil à Downloadify de Doug Neiner qui est une interface JavaScript basée sur Flash pour ce faire.

Downloadify est une petite bibliothèque JavaScript + Flash qui permet la génération et la sauvegarde de fichiers à la volée, dans le navigateur, sans interaction avec le serveur.




Links