Déclencher un téléchargement de fichier

Il existe plusieurs façons de forcer le téléchargement d’un fichier côté navigateur, que ce soit pour un fichier statique déjà hébergé sur votre serveur ou pour des données générées dynamiquement (à la volée dans la page).

Utiliser l’attribut download

En ajoutant l’attribut download à une balise <a>, le navigateur téléchargera le fichier au lieu d’ouvrir le lien. C'est un attribut qui a été ajouté en HTML5, et qui est très bien pris en charge désormais, que ce soit sur mobile ou navigateurs desktop.

<a href="/chemin/vers/le/fichier" download>Télécharger</a>

Cet attribut est très pratique pour des fichiers statiques (PDF, images, etc.) mais que l'on souhaite proposer au téléchargement plutôt que de les "afficher" dans les onglets du navigateur.

En ajoutant une valeur à l'attribut download, on pourra préciser le nom du fichier qui sera écrit ou proposé dans la boîte de dialogue pour sauver le fichier localement, même si c'est un nom différent.

Simuler un clic par JavaScript

On peut créer un lien <a> dynamiquement (sans l'afficher), définir ses attributs, et finir par déclencher un événement click en JavaScript.

// Crée un nouvel élément <a> avec 
const link = document.createElement('a');
link.download = 'Recette-du-cake-au-kiwi.pdf';
link.href = '/recette-generator.php?kiwi';

// Ajoute l’élément au document
document.body.appendChild(link);

// Simule un clic
link.click();

// Supprime l’élément car il est désormais inutile 🧹
document.body.removeChild(link);

Cette technique est pratique si l’on veut déclencher un téléchargement à la suite d’une action utilisateur, sans disposer d'un lien explicitement visible et cliquable. Attention cependant à l'accessibilité d'une telle technique, qu'il faudra tester et à adapter à vos besoins.

Télécharger des données générées dynamiquement

On peut aussi vouloir télécharger des données produites côté navigateur, c'est-à-dire en front-end seul, sans que le serveur n'y soit pour rien. Cela peut résulter de données en JSON, texte, et même binaires en image, etc.

Pour cela, on peut

• transformer les données en Blob (voir aussi l'article sur les blob URLs)
• créer une URL temporaire avec URL.createObjectURL()
• utiliser la méthode précédente pour déclencher le téléchargement

Exemple avec un fichier JSON basique :

// Objet JavaScript brut
const obj = { recette: 'Rôti au kiwi', duree: 120, ingredients: 3 };

// Données à exporter converties en chaîne de texte
const data = JSON.stringify(obj);

// Crée un blob à partir des données
const blob = new Blob([data], { type: 'application/json' });

// Génère une URL temporaire
const url = window.URL.createObjectURL(blob);

// Crée un lien et déclenche le téléchargement
const link = document.createElement('a');
link.href = url;
link.download = 'data.json';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

// Libère l’URL temporaire et la mémoire 🧹
window.URL.revokeObjectURL(url);

Avec ces 3 petites techniques, vous pouvez proposer des téléchargements sans recharger la page dans le navigateur, par exemple dans le cadre d'une SPA.