web-dev-qa-db-fra.com

Comment créer un fichier dynamique + lien à télécharger en Javascript?

En règle générale, les pages HTML peuvent avoir un lien vers des documents (PDF, etc ...) qui peuvent être téléchargés à partir du serveur.

En supposant une page Web compatible Javascript, est-il possible de créer dynamiquement un document texte (par exemple) à partir du navigateur de l'utilisateur et d'ajouter un lien pour télécharger ce document sans aller-retour vers le serveur (ou un minimum)?

Dans un autre Word, l'utilisateur cliquerait sur un bouton, le javascript générerait des nombres aléatoires (par exemple) et les mettrait dans une structure. Ensuite, le javascript (JQuery par exemple) ajouterait un lien vers la page pour télécharger le résultat sous forme de fichier texte à partir de la structure.

Cet objectif est de conserver la totalité (ou au moins la plupart) de la charge de travail du côté utilisateur.

Est-ce possible, si oui comment?

javascriptfiledynamicdownloadcreation
22
Jérôme Verstrynge

En ajoutant un RI de données à la page, vous pouvez intégrer un document dans la page qui peut être téléchargée. La partie données de la chaîne peut être concaténée dynamiquement à l'aide de Javascript. Vous pouvez choisir de le formater comme une chaîne codée URL ou comme codé en base64. Lorsqu'il est encodé en base64, le navigateur télécharge le contenu sous forme de fichier. Vous devrez ajouter un plugin script ou jQuery pour effectuer l'encodage. Voici un exemple avec des données statiques:

jQuery('body').prepend(jQuery('<a/>').attr('href','data:text/octet-stream;base64,SGVsbG8gV29ybGQh').text('Click to download'))
13
Nate Barr

Voici une solution que j'ai créée, qui vous permet de créer et de télécharger un fichier en un seul clic :

<html>
<body>
    <button onclick='download_file("my_file.txt", dynamic_text())'>Download</button>
    <script>
    function dynamic_text() {
        return "create your dynamic text here";
    }

    function download_file(name, contents, mime_type) {
        mime_type = mime_type || "text/plain";

        var blob = new Blob([contents], {type: mime_type});

        var dlink = document.createElement('a');
        dlink.download = name;
        dlink.href = window.URL.createObjectURL(blob);
        dlink.onclick = function(e) {
            // revokeObjectURL needs a delay to work properly
            var that = this;
            setTimeout(function() {
                window.URL.revokeObjectURL(that.href);
            }, 1500);
        };

        dlink.click();
        dlink.remove();
    }
    </script>
</body>
</html>

J'ai créé cela en adaptant le code de cette démo HTML5 et en jouant avec les choses jusqu'à ce que cela fonctionne, donc je suis sûr qu'il y a des problèmes avec lui (veuillez commenter ou modifier si vous avez des améliorations!) Mais c'est une solution fonctionnelle en un seul clic.

(au moins, cela fonctionne pour moi sur la dernière version de Chrome dans Windows 7)

21
ahuff44

A PDF? Non. Un fichier txt. Oui. Avec les récents URI HTML5 blob. Une forme très basique de votre code ressemblerait à ceci: :

window.URL = window.webkitURL || window.URL;
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
var file = new window.BlobBuilder(),
    number = Math.random().toString(); //In the append method next, it has to be a string
file.append(number); //Your random number is put in the file

var a = document.createElement('a');
a.href = window.URL.createObjectURL(file.getBlob('text/plain'));
a.download = 'filename.txt';
a.textContent = 'Download file!';
document.body.appendChild(a);

Vous pouvez utiliser les autres méthodes mentionnées dans les autres réponses comme solution de rechange, car BlobBuilder probablement n'est pas pris en charge très bien.

Démo

Remarque: BlobBuilder semble obsolète. Référez-vous à cette réponse pour voir comment utiliser Blob au lieu de BlobBuilder . Merci à @ limonte pour l'avertissement.

10
Some Guy