JS : Forcer le téléchargement d’un fichier avec un blob

Partager cet article

Temps estimé pour la lecture de cet article : 14 min

La classe blob et son fonctionnement

Aujourd’hui, je vais vous parler, de la classe Blob et des possibilités qu’elle apporte afin de permettre aux développeurs de créer des fichiers en javascript. Nous verrons, également un petit « hack », afin de nous permettre de forcer le téléchargement d’un fichier toujours grâce au javascript. J’ai eu besoin de ce genre de technique pour me permettre sur le backend d’une application de télécharger des données grâce à une fonction Ajax.

Regardons ce que nous dit la documentation de mozilla à propos des blobs:

Un objet Blob représente un objet-fichier d’immuables, données brutes. Les blobs représentent des données qui ne sont pas nécessairement dans un format JavaScript natif. L’interface File est basée sur Blob, héritant des fonctionnalités de Blob et les étend pour supporter les fichiers sur le système de l’utilisateur.

Cas concret d’utilisation

Nous allons donc réaliser une petite fonction, qui au clic sur un bouton va permettre de télécharger un fichier. Pour le bouton, on pourrait utiliser un lien qu’il suffirait de styliser. Bref, nous avons donc un lien vide, de ce style :

<a href="#" class="download-link"></a>

Au clic, sur ce lien nous aimerions bien faire télécharger des données à l’utilisateur, admettons que nous soyons des grands fans de Victor Hugo et de son poème « Demain, dès l’aube », voici le fichier que l’on va tenter de créer et de télécharger au clic :

Demain, dès l'aube, à l'heure où blanchit la campagne,
Je partirai. Vois-tu, je sais que tu m'attends.
J'irai par la forêt, j'irai par la montagne.
Je ne puis demeurer loin de toi plus longtemps.

Je marcherai les yeux fixés sur mes pensées,
Sans rien voir au dehors, sans entendre aucun bruit,
Seul, inconnu, le dos courbé, les mains croisées,
Triste, et le jour pour moi sera comme la nuit.

Je ne regarderai ni l'or du soir qui tombe,
Ni les voiles au loin descendant vers Harfleur,
Et quand j'arriverai, je mettrai sur ta tombe
Un bouquet de houx vert et de bruyère en fleur. 

Pour ce faire, nous allons utiliser l’attribut download introduit avec le html5 d’une balise a. Cet attribut indique aux navigateurs web de télécharger une URL au lieu de naviguer vers elle, de sorte que l’utilisateur sera invité à l’enregistrer en tant que fichier local. Si l’attribut a une valeur, il est utilisé comme nom de fichier prérempli. Il nous suffira alors plus qu’à cliquer sur le lien grâce à du javascript.

Pour ce faire, nous allons utiliser la fonction attr de jquery. Elle permet de récupérer ou de changer la valeur d’un attribut. Son utilisation est simpliste, il suffit de préciser le nom de l’attribut, puis la valeur qu’on veut lui attribuer. Par exemple :

$(myElement).attr("id", "test");

Et, si on utilisait maintenant tous ce que nous avons vu :3 ?

$(".download-link").click(function(event) {
    var blob = new Blob(
    [data], {
        type: "application/octet-stream"
    });
    var url  = URL.createObjectURL(blob);
     
    var link = $(".download-link");
    link.attr("href", url);
    link.attr("download", "victor-hugo.txt");
});

Au click, sur un élément avec la classe download-link, on créé un objet Blob, avec le contenu d’une variable appelée data (qui pourrait par exemple résulter du parsing d’un fichier json ou être tout simplement une string). On précise également un MIME attachment de type « application/octet-stream ». La fonction statique URL.createObjectURL() permet de créer un objet DOMString qui va contenir une URL représentant l’objet donné en paramètre. L’url obtenue, représente le fichier. En affectant une valeur à l’attribut download du lien, on déclenche son téléchargement par le navigateur !

Enfin, voici un exemple du résultat obtenu : Télécharger le poème "Demain dès l'aube"

1 comment

  1. Bonjour,
    ça fait des jours que je cherchais ou que j’essayais de deviner une méthode dans le but d’obtenir cela tant la documentation est vaste, éparpillée et parfois obscure avec des choses devenues obsolètes. Je sentais que c’était possible et que cela devait être simple mais pas moyen de finir le puzzle avant de tomber sur votre article très court mais d’une efficacité déconcertante.
    Je vous remercie grandement, je ne connaissais pas votre site mais il est désormais dans le TOP20, voire le TOP10 de ceux qui comptent pour moi.

    Bonne continuation.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.