Astuce Utiliser l'attribut «télécharger» HTML5

Créer un lien de téléchargement en HTML est simple; ajouter une balise d'ancrage et pointer vers le fichier dans le href attribut. Cependant, certains types de fichiers (tels que images, .pdf, .txt et .doc, par exemple) ne seront pas téléchargés. Au lieu de cela, ils seront ouverts dans le navigateur.

Si vous avez un accès côté serveur à votre site Web, vous pouvez utiliser certaines solutions de contournement, telles que la configuration du .htaccess, pour télécharger ces fichiers directement. Si votre site est hébergé avec un service gratuit tel que WordPress.com, Blogspot ou peut-être des pages Github qui ne vous le permettent pas, envisagez d'utiliser le Télécharger attribut.

Utiliser l'attribut «Télécharger»

le Télécharger attribut fait partie de la spécification HTML5 et exprime un lien comme Télécharger lien plutôt qu'un navigation lien.

le Télécharger Cet attribut vous permet également de renommer le nom du fichier lors du téléchargement. Lorsque le fichier réside sur le serveur, en particulier s'il a été généré automatiquement, il peut être nommé systématiquement avec des chiffres et des tirets, par exemple acme-doc-2.0.1.txt. Il serait préférable que les utilisateurs reçoivent le fichier avec un nom plus judicieux une fois téléchargé, par exemple: Acme Documentation (ver. 2.0.1) .txt (sans oublier l'extension du fichier).

Voici à quoi cela ressemblerait dans la pratique:

Télécharger le texte 

Essayez-le sur la page de démonstration et vous devriez trouver le fichier téléchargé avec le nom spécifié dans le Télécharger attribut.

Un couple de notes:

• Firefox permet uniquement aux utilisateurs de télécharger des fichiers de même origine pour des raisons de sécurité. Le fichier doit provenir de votre propre serveur ou nom de domaine, sinon il sera ouvert dans le navigateur..
• Bien que le téléchargement de fichiers d'origine croisée soit autorisé dans Chrome et la dernière version d'Opera (avec Chromium / Blink), ils ignoreront tous les deux la valeur de l'attribut. En d'autres termes, le nom du fichier restera inchangé.

Fournir un repli

Au moment de la rédaction, le Télécharger Cet attribut n'est pas encore implémenté dans Safari et (comme on peut s'y attendre) dans Internet Explorer. Dire que, selon le statut moderne de l'IE, il figure actuellement en tête de liste des projets de développement et reçoit beaucoup de votes. 

En attendant, nous pouvons ajouter une solution de rechange décente, notamment en fournissant des instructions supplémentaires sous le lien de téléchargement pour les navigateurs non compatibles. Pour ce faire, nous devrons télécharger Modernizr avec le logiciel Télécharger test de fonctionnalité inclus.

Ensuite, nous pouvons ajouter le script suivant.

if (! Modernizr.adownload) var $ link = $ ('a'); $ link.each (function () var $ download = $ (this) .attr ('download'); if (type of $ download! == type of undefined && $ download! == false) var $ el = $ ( '
') .addClass (' instruction de téléchargement '). text (' Cliquez avec le bouton droit de la souris et sélectionnez "Télécharger le fichier lié" '); $ el.insertAfter ($ (this)); );  

Le script testera si le navigateur prend en charge la Télécharger attribut; sinon il va ajouter un nouveau 

 avec la classe à des fins de style ainsi que le texte d'instruction, et insérez-le immédiatement en dessous de tout lien qui a été fourni avec Télécharger attribut.

L'instruction de texte apparaît dans Safari.

Emballer

le Télécharger attribut rend la gestion des liens de téléchargement très pratique pour ceux qui n’ont pas accès à la configuration côté serveur. Je suis impatient de voir Internet Explorer et Safari mettre en œuvre le Télécharger attribuer bientôt!

Création de sites web