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

Partager cet article

Temps estimé pour la lecture de cet article : 13 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"

Laisser un commentaire

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