{"id":2406,"date":"2012-04-23T08:15:05","date_gmt":"2012-04-23T06:15:05","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=2406"},"modified":"2015-01-18T16:07:55","modified_gmt":"2015-01-18T15:07:55","slug":"html5-attribut-download-pour-forcer-telechargement","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/html5-attribut-download-pour-forcer-telechargement","title":{"rendered":"HTML5 – Attribut download pour forcer le t\u00e9l\u00e9chargement d’une ressource"},"content":{"rendered":"

Je vous parlais d’une solution pour forcer le t\u00e9l\u00e9chargement gr\u00e2ce \u00e0 un morceau de code dans votre fichier .htaccess dans l’article pr\u00e9c\u00e9dent<\/a>, alors que je venais juste de d\u00e9couvrir cet attribut HTML5 permettant de faire la m\u00eame chose en mieux. Pour le moment seul Chrome supporte cet attribut.<\/p>\n

Pr\u00e9sentation de l’attribut download<\/code><\/h2>\n

En gros cet attribut permet de sp\u00e9cifier au navigateur qu’il ne doit pas se diriger (naviguer) vers la ressource cibl\u00e9e, mais la t\u00e9l\u00e9charger.
\nCet attribut s’applique donc naturellement un \u00e9l\u00e9ment a<\/code> et peut avoir une valeur qui sera attribu\u00e9e comme nom de fichier \u00e0 la ressource que vous allez t\u00e9l\u00e9charger. <\/p>\n

Voici un exemple d’utilisation :<\/p>\n

<a href=\"http:\/\/www.creativejuiz.fr\/images\/main.jpg\" download=\"CreativeJuiz_Background\">T\u00e9l\u00e9charger l'image<\/a><\/code><\/pre>\n
La valeur de l’attribut download<\/code> n’a, a priori, aucune restriction, mais il faut avoir en t\u00eate qu’il s’agit d’un nom de fichier et que tous les syst\u00e8mes ne sont pas \u00e9gaux quant au traitement de certains signes de ponctuation (mais contredites-moi si je fais erreur). Vous remarquerez que j’ai \u00e9cris \u00ab\u00a0CreativeJuiz_Background\u00a0\u00bb en nom de fichier, et non \u00ab\u00a0CreativeJuiz_Background.jpg\u00a0\u00bb. En effet il est inutile de pr\u00e9ciser l’extension du fichier si vous souhaitez conserver l’originale.<\/p>\n
\"\"
La barre de t\u00e9l\u00e9chargement de Chrome apr\u00e8s deux essais de l'attribut download<\/figcaption><\/figure>\n
Si vous naviguez sur la derni\u00e8re version de Chrome, ce lien de d\u00e9mo devrait vous proposer de t\u00e9l\u00e9charger un fichier .png : T\u00e9l\u00e9charger l’image<\/a><\/p>\n
La valeur de l’attribut download<\/code> accepte \u00e9galement l’ajout d’une extension de fichier, il est ainsi possible de proposer au t\u00e9l\u00e9chargement un fichier HTML transform\u00e9 en fichier TXT par exemple :<\/p>\n
<a href=\"http:\/\/www.creativejuiz.fr\/trytotry\/css3-box-shadow-after-before\/index.html\" download=\"CreativeJuiz_DropShadow.txt\">T\u00e9l\u00e9charger le code (.txt)<\/a><\/code><\/pre>\n
Ce qui nous donnerait le lien suivant : T\u00e9l\u00e9charger le code (.txt)<\/a><\/p>\n
Sous Firefox, le t\u00e9l\u00e9chargement automatique est d\u00e9sactiv\u00e9 si le lien renseign\u00e9 n’est pas sur le m\u00eame domaine que la page courante. Le plus simple \u00e9tant de proposer des liens relatifs.<\/p>\n
Avis personnel<\/h2>\n
Cet attribut est plut\u00f4t int\u00e9ressant en un sens, puisqu’il permet d’all\u00e9ger le fichier .htaccess ou certains scripts en PHP.
\nCependant, \u00e0 l’image de l’attribut target<\/code> aujourd’hui consid\u00e9r\u00e9 comme une mani\u00e8re de contraindre le visiteur \u00e0 naviguer d’une certaine mani\u00e8re, cet attribut download<\/code> ne serait-il pas en train de reproduire ce sch\u00e9ma de contrainte en for\u00e7ant un visiteur \u00e0 t\u00e9l\u00e9charger une image (ou tout autre type de fichier) alors qu’il souhaite juste la visualiser dans son navigateur ? Il faudra voir cela \u00e0 l’usage \ud83d\ude42<\/p>\n
\n
Sources et liens utiles<\/h2>\n