C'est intéressant de voir comment certaines choses bouclent la boucle. Dans les premiers jours du Web, les navigateurs téléchargeaient automatiquement des liens vers des fichiers qui n'étaient pas une page Web, comme des images, des fichiers PDF et des documents. Ensuite, les navigateurs sont devenus si avancés qu'ils ont pu ouvrir presque tous les fichiers en temps réel. Cela a cependant créé un problème pour les développeurs. Comment forceriez-vous un navigateur à télécharger un fichier au lieu de l'ouvrir? Un tas de hacks et de solutions de contournement ont surgi pour résoudre le problème, mais aucun n'était une vraie solution. Tout cela a changé avec HTML5 lorsque le Télécharger l'attribut a été présenté.
Désormais, les développeurs peuvent ajouter un attribut de téléchargement spécial à leurs balises d'ancrage HTML pour indiquer aux navigateurs de traiter un lien comme un téléchargement, plutôt que d'ouvrir le fichier cible. Il existe plusieurs façons d'utiliser l'attribut de téléchargement pour contrôler la manière dont les navigateurs gèrent vos liens de téléchargement. Mieux encore, tous les navigateurs modernes prennent en charge l'attribut de téléchargement, vous ne devriez donc voir aucun problème de compatibilité ou la nécessité d'une solution de secours.
:max_bytes(150000):strip_icc()/download-example-56a1adbb3df78cf7726cfd60-65b676de4f0648d7bdd50274f743fa52.png)
Il existe plusieurs manières de gérer l'attribut de téléchargement. Chacun a son propre avantage et ils fonctionnent tous sans problème sur différents navigateurs.
L'attribut de téléchargement simple
La façon la plus simple d'utiliser l'attribut de téléchargement est de simplement l'inclure dans sa forme la plus basique dans vos balises d'ancrage. Vous n'avez pas besoin d'inclure un nom de fichier supplémentaire ou des informations de support. Le résultat ressemble à ceci:
<a href="/path/to/download.pdf" download> Téléchargez maintenant! </a>
:max_bytes(150000):strip_icc()/download-link-button-b503f4f2c4294ec49fe36faf6c2f8f1b.jpg)
En incluant «télécharger», vous indiquez à tout navigateur qui lit la page de télécharger le lien cible au lieu de l'ouvrir. Dans ce cas, le navigateur téléchargera le fichier exactement tel qu'il porte le même nom.
:max_bytes(150000):strip_icc()/download-file-7ab646ba62404ab5acba51b850076d26.jpg)
Changer le nom du fichier
Que se passe-t-il si vous souhaitez réellement changer le nom. Il y a de nombreuses occasions où vous voudriez faire cela. Les noms de fichiers générés automatiquement en sont un bon exemple. Ils ont généralement des noms ridiculement longs avec des chaînes de caractères poubelles. Ce n'est pas l'expérience que vous souhaitez pour vos visiteurs. Vous pouvez standardiser les choses avec l'attribut de téléchargement.
Pour spécifier un nom de fichier, définissez l'attribut de téléchargement sur lui. Excluez l'extension de fichier. Le navigateur ne peut pas et ne veut pas convertir le type de fichier, il n'y a donc aucun sens à essayer.
<a href="/path/to/download.pdf" download="your-file"> Téléchargez maintenant! </a>
Vos visiteurs téléchargeront le fichier en tant que votre-fichier.pdf.
Téléchargement d'une image
Parallèlement à cela, il existe un moyen simplifié de permettre à vos utilisateurs de télécharger directement des images. Ce n'est pas révolutionnaire, et vous pouvez probablement le reconstituer vous-même, mais vous pouvez utiliser l'attribut de téléchargement pour créer un lien d'image téléchargeable.
:max_bytes(150000):strip_icc()/image-download-link-fd03ef9e378b4fbc91349e4a8c99712c.jpg)
Commencez par configurer une image comme vous le feriez normalement sur votre page. Ceci, bien sûr, sera l'image disponible au téléchargement.
<img src = "/ chemin / vers / image.jpg" alt = "mon image">
Ensuite, encapsulez le tout dans une balise d'ancrage, reliant le chemin de l'image.
<a href="/path/to/image.jpg">
<img src = "/ chemin / vers / image.jpg" alt = "mon image">
</a>
Enfin, ajoutez l'attribut de téléchargement à votre balise d'ancrage. Vous pouvez changer le nom de votre image si vous le souhaitez.
<a href="/path/to/image.jpg" download="image-download">
<img src = "/ chemin / vers / image.jpg" alt = "mon image">
</a>
:max_bytes(150000):strip_icc()/image-download-029f23359d9c4e2c9817c5226299ec76.jpg)
Désormais, lorsqu'un visiteur clique sur l'image, il la télécharge automatiquement directement depuis votre serveur. Ce n'est pas nécessaire, et cela peut sembler exagéré pour un développeur, mais combien de visiteurs du site penseraient-ils à cliquer avec le bouton droit sur une image pour l'afficher ou la télécharger?