HTML5 - L'attribut download

Astuce par (WebDesigner grapilleur de Kiwiz, Strasbourg)
Créé le , mis à jour le (53154 lectures)
Tags : attribut, download

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.

Cet 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 contredisez-moi si je fais erreur). Vous remarquerez que j’ai écrit « Pacman_Kiwi » en nom de fichier, et non « Pacman_Kiwi.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

Firefox 20+
Firefox Android 32+

Supporté (Bloque la possibilité de téléchargement d'une ressource sur un domaine différent)
Chrome Chrome 14+
Chrome Android 38+
Supporté
Opera Opera 15+
Opera Mobile 24+
Supporté
Safari Safari
Safari Mobile (iOS 5)
Non supporté
Internet Explorer Internet Explorer Non supporté
Android Browser Android Browser 4.4+ Supporté

L'information sur CanIuse.

Ressources

Commentaires

Blount a dit le

Concernant l'"Avis personnel", ça dépend. Si l'action est clairement identifiée à "Télécharger" alors l'afficher dans le navigateur devient l'action inattendu de l'utilisateur.
Si le lien est placé sur la miniature de l'image, alors je suis d'accord, c'est forcer l'utilisateur. Il faudrait dans ce cas 2 liens : agrandir et télécharger.
Mais soyons réaliste, tous les utilisateurs sont loin de maitriser le Clic droit > Télécharger la cible …
L'attribut donwload est donc efficace pour les utilisateurs débutants.

madvic a dit le

Coquille :
"j’ai écris « Pacman_Kiwi » en nom de fichier, et non « Pacman_Kiwi.png »"
en lieu de
"j’ai écris « Logo_Alsacreations » en nom de fichier, et non « Logo_Alsacreations.png »"

Free_French a dit le

Bonjour,

J'utilise Chrome 39 et l'attribut ne semble pas supporté (l'image s'affiche dans le navigateur).

GromNaN a dit le

Pour arriver au même résultat, il est possible depuis très longtemps de définir l'en-tête HTTP "Content-Disposition: attachment; filename=<file name.ext>".

rintaro a dit le

"mais contredites-moi si je fais erreur"
Effectivement, vous faites une erreur de conjugaison !
le verbe "contredire" ne se conjugue pas comme le verbe "dire".
on dit : dites-moi mais contredisez-moi !

rintaro a dit le

Et, tant qu'on y est ....
"Vous remarquerez que j’ai écrit" et non "Vous remarquerez que j’ai écris"

Crakotte a dit le

Intéressant ! Attention cependant pour la reprise automatique de l'extension initiale, cela ne semble pas fonctionner sous Firefox (Windows).

Seb33300 a dit le

"Cette article" => "Cet article"

graphidev a dit le

Bonjour,

Cette attribut semble particulièrement intéressant pour redéfinir le nom du fichier à télécharger. En revanche, pour le support, mieux vaut utiliser l'en-tête `Content-disposition: attachment;filename=...` comme l'évoquait @GromNaN.

D'autre part, il est possible d'ajouter un marqueur dans l'URL tel que "fichier.ext?down=load" (ce qui requiert cependant un script serveur) et ainsi proposer les deux méthodes (visualiser/télécharger).

Concernant la contrainte pour l'utilisateur, elle me semble totalement négligeable du moment où le contexte de l'action est correctement défini (icone ou texte explicatif). Et ce, qu'il s'agisse de l'attribut "target" ou "download".
Pour ce faire, je ne peux que conseiller l'article de Raphael Goetter : http://www.alsacreations.com/tuto/lire/556-li...

La contrainte pour l'utilisateur reste cependant à l'entière responsabilité des webdesigners. Mais après tout, il s'agit ici de promouvoir de bonnes pratiques, non ? :)

Geoffrey C. a dit le

@Blount : Effectivement il faut que le contexte soit clairement défini, comme je le précisais en fin d'avis :)

@GromNaN : En effet. Mais nous sommes bien d'accord qu'il ne s'agit pas du même sujet. Là où cet attribut propose d'agir côté client et pourrait être intégré dans un CMS pour un utilisateur lambda par exemple, définir l'en-tête HTTP demande d'intervenir côté serveur et est difficilement compréhensible par "le grand public".

@madvic , @rintaro , @Seb33300 : merci pour vos yeux avertis. L'article a été publié sans ma relecture, mais l'équipe a su rapidement réagir à vos remarques. J'ai appris un truc pour contredire, merci ;)

@graphidev : dans un monde idéal où tous les développeurs seraient attentifs à ce genre de détail, je te l'accorde, c'est négligeable. Mais tel n'est pas le cas, je pense donc que ce n'est pas négligeable de rappeler ce genre de comportement ou d'attente d'information pour l'utilisateur par les développeurs ou designers.

Merci à vous pour vos commentaires.

Bigre a dit le

Étant beaucoup plus côté utilisateur que développeur (même si j'ai quelques notions, je ne suis pas non plus ce site par hasard...), il me semble que j'irais plus loin dans l'avis utilisateur : cet attribut est à éviter ! Alors bien sûr dans telle ou telle situation, il peut être pratique. Mais il risque de causer tant de mal qu'il vaut mieux l'éviter. Je ne compte déjà pas le nombre de fois où des fichiers sont proposés au téléchargement sans qu'il y ait affichage possible dans le navigateur. Quand c'est un .txt ou une image c'est stupide (et désagréable d'un point de vue expérience utilisateur). Je veux regarder le fichier .txt ou l'image dans mon navigateur et l'enregistrer ensuite si j'en ai envie, pas enregistrer par défaut puis, éventuellement, supprimer le fichier si je ne le veux pas !

QuentinC a dit le

Contrairement à ce qu'en disent certains, ce n'est pas du tout négligeable. En absence de contexte clair, c'est désagréable quand un fichier s'ouvre alors qu'on s'attendait à le télécharger ou vice versa (c'est notamment le cas des PDF où l'action par défaut est particulièrement imprévisible). De même que c'est désagréable quand on est forcé d'ouvrir un nouvel onglet quand on n'en veut pas, ou au contraire quand on aimerait ouvrir une page dans un nouvel onglet et qu'on ne peut pas parce que c'est codé avec du js mal fichu. ET encore de même quand l'action "page précédente" ne fonctionne pas comme on s'y attend.

D'après moi, c'est ce genre de détails qui font qu'un site est agréable à utiliser ou non; mème si vous faites le site le plus accessible et le plus respectueux des standards du monde, pour moi ça peut être *le* détail agaçant.

Je rejoins un peu l'avis personnel de l'auteur en disant que c'est un attribut mal pensé, paliatif mal réfléchi.

Le problème, en réalité, c'est qu'il faudrait avoir un moyen simple pour l'utilisateur de définir par exemple que par défaut les PDF on les télécharge toujours et que les images on les ouvre toujours dans le navigateur; peu importe un attribut download ou même Content-Disposition, et peu importe que le navigateur soit capable nativement ou via un plugin d'ouvrir le fichier directement. On rejoint la même idée qu'avec target, ce n'est pas au développeur de forcer l'utilisateur à faire de telle ou telle façon, c'est l'utilisateur qui doit avoir le dernier mot.

A quand un attribut nodownload pour empêcher les noobs de télécharger des MP3 ?

Geoffrey C. a dit le

@Bigre : je pense que tu généralises un peu trop ta manière d'utiliser le web. Tu peux vouloir des choses que d'autres utilisateurs préfèrent ne pas avoir. L'important et d'accompagner le comportement d'un moyen de le reconnaître (label, description, icône). Même si vous forcez l'utilisateur à télécharger une ressource, ce sera moins mauvais de lui signaler d'un quelconque manière. Après l'avantage direct de l'attribut download, c'est que ça ne t'empêche pas de l'ouvrir dans un nouvel onglet si tu ne veux pas télécharger la ressource.

Ten a dit le

Et sinon, indiquer le comportement d’un élément interactif fait partie des bases de l’accessibilité. Par exemple sur la dernière mouture du référentiel Accessiweb, le critère 13-6 est intéressant.

Il faudrait y rajouter la méthode d’ouverture ou de téléchargement, notamment. Dans a11y.css je teste l’attribut target, l’attribut download ainsi que la cible des liens (href) dont l’URL se termine par une extension de fichiers courantes.

Tout ces éléments doivent être indiqués dans la mesure du possible :) Pour l’utilisateur, la prévention permet d’éviter l’effet de surprise (évitez de supposer de ses attentes ou de ses réactions, on l’informe, point) et de lui permettre de diriger sa navigation et son parcours.

denisdeejay a dit le

Pour ma part, je trouve que c'est une excellente nouvelle :-)

Pour rebondir sur l'avis personnel, je dirai que j'ai vu pas mal de fois (et sur firefox maheureusement) des problèmes pour le téléchargement. Ca dépend de la version d'apache bien sur mais dans quelques cas, si il n'y avait pas d'entête http envoyé pour forcer le téléchargement (via php ou htaccess) firefox tentait d'afficher le contenu. J'ai eu le cas avec des fichiers .rar de 20mo que forefox tentait d'afficher dans le navigateur ... de jolis hiéroglyphe à la sortie :)

Après c'est comme tout, il faut l'utiliser avec parcimonie et ne l'utiliser uniquement si c'est vraiment utile à l'internaute.