Je vous parlais d’une solution pour forcer le téléchargement grâce à un morceau de code dans votre fichier .htaccess dans l’article précédent, alors que je venais juste de découvrir cet attribut HTML5 permettant de faire la même chose en mieux. Pour le moment seul Chrome supporte cet attribut.
Présentation de l’attribut download
En gros cet attribut permet de spécifier au navigateur qu’il ne doit pas se diriger (naviguer) vers la ressource ciblée, mais la télécharger.
Cet attribut s’applique donc naturellement un élément a 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.creativejuiz.fr/images/main.jpg" download="CreativeJuiz_Background">Télécharger l'image</a>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 « CreativeJuiz_Background » en nom de fichier, et non « CreativeJuiz_Background.jpg ». En effet il est inutile de préciser l’extension du fichier si vous souhaitez conserver l’originale.
Si vous naviguez sur la dernière version de Chrome, ce lien de démo devrait vous proposer de télécharger un fichier .png : Télécharger l’image
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.creativejuiz.fr/trytotry/css3-box-shadow-after-before/index.html" download="CreativeJuiz_DropShadow.txt">Télécharger le code (.txt)</a>Ce qui nous donnerait le lien suivant : Télécharger le code (.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
Cet attribut est plutôt intéressant en un sens, puisqu’il permet d’alléger le fichier .htaccess ou certains scripts en PHP.
Cependant, à 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 ? Il faudra voir cela à l’usage 🙂
Sources et liens utiles
Partager la publication "HTML5 – Attribut download pour forcer le téléchargement d’une ressource"
Pas mal cet attribut, jamais entendu parler x)
C’est planqué quelque part dans la spécif HTML5 ou bien ?
Il faudra étudier les possibilités mais je vois déjà un avantage à ceci : proposer au téléchargement le même fichier en plusieurs formats. Un seul fichier sur le serveur, mais un fichier txt, un html, un pdf, etc à DL 🙂 (bon j’abuse un peu là ^^).
Bref, merci pour l’article, bookmarké.
C’est bizarrement bien planqué dans la documentation du WhatWG (attention HTML Living Standard, et non HTML5, m’enfin bon… :p)
Merci pour la suggestion/lecture 😉
Je me doutais bien que ce ne serait pas encore dans la spécif HTML5. En revanche ça ne date pas d’hier, à voir l’un des liens en source de l’article, qui fate de plusieurs mois.
C’est étrange qu’on n’en ai pas plus entendu parler que ça.
Thx pour la doc WhatWG 🙂
Ouais il y a des choses comme ça qui ont du mal à percer, qui sont abandonnées, puis reprises plus tard (exemple : @font-face).
C’est pas nouveau mais ça me semblait pas trop mal d’en parler 🙂
Comme tu dis si bien dans ton article, à l’image de l’attribut target, ça va vite être mis de côté je pense, même si ce n’est déjà fais puisque l’info est tout de même difficile à trouver.
Drôlement pratique !
En effet pour les images, l’intérêt est assez limité pour l’utilisateur, en revanche pour tous les fichiers pdf/doc/html/txt etc… qui sont lus nativement par les navigateurs, c’est super pratique je trouve, ca remplace les scripts un peu lourdingue parfois.
Ne fonctionne pas correctement sur Firefox 14.0.1 !!!
J’ai eu affaire à cet attribut sur la page de téléchargement de Prism js : http://prismjs.com/download.html
La boîte de téléchargement s’affiche effectivement mais les noms de fichier sont bizarres (4f5gd75.part)…
D’ailleurs dans ton article, les liens de téléchargement ne fonctionnent pas non plus… 😉
oupss !
Voilà ce qui arrive lorsqu’on lit en diagonal, j’avais pas vu que tu indiquais que ça ne fonctionnais que sur Chrome.
Désolé. :/
Hello,
Pas de problème. Ça arrive ^^
Je n’ai pas testé récemment l’attribut sur les nouvelles versions de navigateurs. Mais je pense que les autres (autres que Chrome) vont avoir quelques trains de retard, à moins que cet attribut ne soit complètement abandonné.
Au plaisir de te lire.
Utilisant jQuery, il existe aussi Plupload: http://www.plupload.com/example_all_runtimes.php
Bonne journée !
Bonjour Nonos,
Merci pour la ressource, cependant ici on parle bien de download et non d’upload. À moins qu’une chose ne m’échappe sur ce plugin, ça ne parle bien que d’upload.
Bonne journée.
Ah oui ^^’
Si je dis que je voulais vérifier si vous suiviez, ça ne serait pas crédible …
je ne sais pas, j’étais dans mon truc, tout à coup je pense à votre sujet, hop je poste,
j’aurais du me réveiller avant.
Toutes mes confuses,
et à bientôt, parce que de toute façon je n’ai honte de rien.
Bonjour tout le monde! j’ai vraiment besoin d’aide, j’ai une page sur mon site où je poste pleins de musiques à télécharger, que j’upload avant sur Médiafire, et donc je met un lien mediafire avec la balise download. comme ceci :
<a title="Musique" href="http://www.mediafire.com/download/cequajxyrmwqswy/ALESTORM+-+Drink+%28Official+Video%29+-+Napalm+Records.mp3" rel="nofollow">Alestorm - Drink</a>Mais le soucis c’est que ça télécharge, mais pas comme il faut –‘ Enfaite, le téléchargement dure 1/2 sec et quand j’ouvre la musique, ça ne marche pas. J’ai testé de l’upload directement sur mon site et ça marche. Soucis : j’ai le droit à seulement 2GO sur mon site ^^ Donc si quelqu’un peut m’aider 🙂
Hello Wazer,
J’ai remplacé ton code.
Pourtant le message au-dessus du formulaire que tu as dû compléter 3 fois précise comment faire pour afficher du code. Suffisait de lire et copier/coller 😉
Ton code devrait ressembler à cela :
Bonne chance et bon week-end
Merci, donc je ne sais pas si cela vient de Médiafire, car votre balise marche bien pour votre image par exemple ou mes médias upload directement sur mon site. Mais dès que c’est médiafire, ça télécharge mais ça ne fonctionne pas. Comment faire?
Merci
Bonjour,
C’est ni mon lien, ni mediafire qui bug en fait, c’est vous qui n’avez pas utilisé le lien du fichier, mais le lien de la page publique descriptive du fichier.
Le fichier se trouve à cette URL :
http://download1312.mediafire.com/xhv4p6ai8xag/cequajxyrmwqswy/ALESTORM+-+Drink+%28Official+Video%29+-+Napalm+Records.mp3
Vous ne pouvez pas faire télécharger une page complète avec l’attribut download, juste un fichier précis.
D’ailleurs ici l’attribut download est inutile puisque le fichier se télécharge déjà tout seul, à moins que vous ayez besoin de le renommer à la volée.
Bon dimanche.
Rebonjour, désolé de vous derranger mais cela ne marche pas, car j’ai copier les liens comme vous m’avez dit & ça marche sauf que le lendemain ça ne marche plus. Je pense que ça marche que lors que les fichiers sont en caches. Pour ma par ça télécharge du coup : download_repair.html
Le lien que j’ai copié là aujourd’hui vous pouvez déjà me dire qu’il ne sera plus bon demain ? Comment vous faites ? Pourquoi m’avoir fourni un mauvais lien dès le début alors ?
Vos explications ne sont pas claires.
Quoiqu’il en soit, cela ne m’étonnerait pas que les fichiers soient protégé d’une manière ou d’une autre contre le hotlink, si le lien que j’ai fourni n’est plus valable dans 24, alors c’est une forme de protection. En attendant celui que j’ai fourni fonctionne très bien 😉
Oui excusez moi, enfaite, ce lien là, je l’avais déjà testé hier ^^
J’avais fais copier l’adresse du lien sur « download » et ça marchait qu’1 jour.
Sinon, j’ai un autre hébergeur que j’ai trouvé, avec un peu de chance il ne sont pas protégés contre cela.
Ah ah ^^
Pas de problème, au contraire, ça semble être une bonne ressource.
Merci d’avoir pensé à ce blog 🙂
C’est effectivement bon à savoir qu’il existe pareil attribut. Bon après c’est toujours le même problème avec les nouveautés : attendre leur implémentation finale.
Je me posais la question de savoir en revanche si cela ne pourrait pas servir à des utilisateurs vicieux pour propager des virus. D’après toi ?
Hello,
Au fond pas plus qu’un lien classique 🙂
Ils sont partout ! :O
C’est une fonctionnalité qui me plait bien ! Je viens de tester avec la dernière version de firefox et opera au cas où ça aurait bougé de leur côté mais non, chrome reste le seul à la supporter.
Le simple fait de pouvoir renommer suivant le spot de téléchargement je trouve ça super, comme ça on peut garder ses habitudes de nommage de fichiers sur son serveur et faire des jolis noms pour les visiteurs.
Après pour la question de forcer la main du visiteur, certaines choses restent à mes yeux pertinentes à utiliser. Le target je l’utilise encore personnellement, un utilisateur lambda ne sait pas forcément ouvrir un nouvel onglet ou a parfois la flemme de passer par un raccourci clavier ou un clic droit pour le faire. Il quittera la page pour consulter un lien externe et sera gêné dans sa navigation puisqu’il devra passer par l’historique du navigateur pour retourner sur le site. Et si c’est un gros flemmard, il ne reviendra même pas !
C’est vrai que target est et sera toujours un sujet délicat et je comprends ta réflexion à ce sujet.
Pour ma part je pars du principe que je ne peux pas forcer un utilisateur à faire ce qu’il ne veut pas. Si un utilisateur ne sait pas ouvrir un lien dans un nouvel onglet ou s’il a la flemme, tant pis pour lui, c’est que même avec un nouvel onglet il y aurait forte chance pour que fermer l’onglet courant l’embête tout autant.
Puis c’est entrer dans un jeu de frustration pour ce type d’utilisateur: un coup ça ouvre dans un autre onglet, un coup non, ça va le conforter dans l’idée qu’il ne sait pas utiliser l’outil et ne le comprend pas.
J’ai un peu de mal à exprimer l’idée que j’en ai, j’espère que tu auras compris mon charabia :p
Ouaip, j’ai compris, mais si je ne m’abuse, tu utilises les target sur ce blog pour les liens des réseaux sociaux !
Oui c’est vrai.
Erreur de jeunesse pas encore corrigée.
D’ailleurs je viens de voir que c’était aussi le cas sur les liens partenaires et ressources.
Ce sera corrigé :p
Bonjour
J’avais mis dans le htaccess comme vous indiqué ici : http://www.creativejuiz.fr/blog/tutoriels/forcer-telechargement-fichier-par-navigateur mais cela ne fonctionnais pas sur Chrome. Heureusement que cette astuce fonctionne !
Merci pour cette astuce ^^
Bonjour,
Il s’agissait de quel type de fichier ?
Merci.
Bonjour
Il s’agit de .jpg
Cdlt
Merci à toi, super astuce !!!!
Idem, ne fonctionne pas en web sous linux (CentOS)
Merci beaucoup pour ce tuto tu me sauves car j’étais coincé
Avec plaisir 😉
Bonjour,
Je rencontre un problème sur mon site pour le téléchargement des fichiers audios. Au lieu place de lancer le téléchargement sur le clic, c’est la lecture qui se fait.
Bonjour,
Avez-vous suivi ces explications concernant l’attribut download ? Celui-ci devrait résoudre votre problème.
Si tel n’est pas le cas, essayez de forcer le téléchargement grâce à cet autre article davantage « côté serveur » :
Forcer le téléchargement d’un fichier par le navigateur
Dans votre cas, un
AddType application/octet-stream mp3 mp4devrait faire l’affaire.Bonne continuation !
enfin ! quelque chose de bien qui va nous faire éviter de longs scripts pour le téléchargement des fichiers de type pdf , text , audio et autres…
Bonjour, depuis 2012 html à un peu changer et quand on fait : download= »nom » , cela ne fonctionne plus avez-vous une solution ??
Bonjour,
Je l’ai utilisé encore récemment et n’ai pas vu de différence. Pouvez-vous m’en dire davantage sur le contexte d’implémentation ?
Merci