L'attribut download de HTML5 permet de forcer le téléchargement d'une ressource au lieu de la faire afficher par le navigateur. Avant l'apparition de cet attribut encore très méconnu, il était nécessaire de passer par une solution PHP ou .htaccess pour forcer le téléchargement d'une ressource (ou autre solution serveur). Désormais cet attribut rend cette fonctionnalité beaucoup plus abordable.
Cette article a été publié initialement sur le blog de l'auteur : HTML5 - Attribut download
Comment fonctionne l'attribut download ?
En gros cet attribut permet de spécifier au navigateur qu’il ne doit pas se diriger vers la ressource ciblée, mais la télécharger.
Cet attribut s’applique donc naturellement à un élément a ou area et peut avoir une valeur qui sera attribuée comme nom de fichier à la ressource que vous allez télécharger.
Voici un exemple d’utilisation :
<a href="http://www.alsacreations.com/css/img/picto-quiz.png"
download="Pacman_Kiwi">Télécharger l'image</a>
Vous pouvez tester avec un navigateur compatible en cliquant sur ce lien : Télécharger l'image
Si l'image est affichée dans votre navigateur, c'est qu'il n'est pas compatible avec cet attribut. Voir le tableau des compatibilités.
La valeur de l’attribut download n’a, a priori, aucune restriction, mais il faut avoir en tête qu’il s’agit d’un nom de fichier et que tous les systèmes ne sont pas égaux quant au traitement de certains signes de ponctuation (mais contredites-moi si je fais erreur). Vous remarquerez que j’ai écris « Logo_Alsacreations » en nom de fichier, et non « Logo_Alsacreations.png ». En effet il est inutile de préciser l’extension du fichier si vous souhaitez conserver l’originale.
La valeur de l’attribut download accepte également l’ajout d’une extension de fichier, il est ainsi possible de proposer au téléchargement un fichier HTML transformé en fichier TXT par exemple :
<a href="http://www.alsacreations.com/astuce/lire/1603-html5-attribut-download.html"
download="Article_HTML5_download.txt">Télécharger l'article en TXT</a>
Si tout se passe bien, vous devriez pouvoir télécharger cet article au format TXT en cliquant sur : Télécharger l'article en TXT
Sous Firefox, le téléchargement automatique est désactivé si le lien renseigné n’est pas sur le même domaine que la page courante. Le plus simple étant de proposer des liens relatifs.
Avis personnel
À l’image de l’attribut target aujourd’hui considéré comme une manière de contraindre le visiteur à naviguer d’une certaine manière, cet attribut download ne serait-il pas en train de reproduire ce schéma de contrainte en forçant un visiteur à télécharger une image (ou tout autre type de fichier) alors qu’il souhaite juste la visualiser dans son navigateur ? C'est certainement un attribut à utiliser dans une situation où le téléchargement de la ressource devient plus qu'évident pour l'utilisateur.
Compatibilité navigateur
| Navigateurs | Versions | Détails |
|---|---|---|
 |
Firefox 20+ |
Supporté (Bloque la possibilité de téléchargement d'une ressource sur un domaine différent) |
 |
Chrome 14+ Chrome Android 38+ |
Supporté |
 |
Opera 15+ Opera Mobile 24+ |
Supporté |
 |
Safari Safari Mobile (iOS 5) |
Non supporté |
 |
Internet Explorer | Non supporté |
L'information sur CanIuse.