Téléchargement de fichier

Ce composant est disponible depuis la version 1.5.0
Nous sommes attentifs à vos retours afin de pouvoir apporter des corrections si nécessaire. Soyez vigilant quand à son utilisation en production !

 

Ce composant permet à l’usager de télécharger un document depuis votre site. Deux options sont possibles :

  • un lien de téléchargement

  • un bloc de téléchargement pour mettre plus en avant le document.

Dans les deux cas, il est possible de mettre un ou plusieurs documents à disposition à la suite.

Attention, il s’agit du composant pour que l’usager télécharge un document depuis votre site. Pour téléverser un document vers votre site, utiliser le composant ajout de ficher.

Lien de téléchargement

Le lien de téléchargement permet de mettre à disposition un ou plusieurs fichiers en téléchargement au fil du texte.

Structure

Il est composé des éléments suivants :

  • Nom du ficher - obligatoire

  • Icône télécharger - obligatoire

  • Format et poids du ficher - obligatoire

  • Précision de la langue (dans le libellé) - obligatoire si le document est dans une autre langue que celle de la page courante.

Note pour les développeurs: L’attribut download permet le téléchargement direct de la ressource, sans l'ouvrir. Il est n'est pas obligatoire. Associé à une valeur cela permet aussi de renommer le fichier par cette valeur avant de le télécharger.
Si vous souhaitez ouvrir le document dans une nouvelle fenêtre, utiliser l'attribut target="_blank".

 

 

1 2 3 4 5 6 7 8 9 <div class="fr-download"> <p> <a href="[À MODIFIER]" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet <span class="fr-download__detail"> JPG – 61,88 ko </span> </a> </p> </div>

Liste de liens de téléchargement

Il est possible de faire une liste de liens de téléchargement.

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <div class="fr-downloads-group fr-downloads-group--bordered"> <h4 class="fr-downloads-group__title">Titre facultatif</h4> <ul> <li> <div class="fr-download"> <p> <a href="[À MODIFIER ]" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet <span class="fr-download__detail"> PDF – 161,88 Ko </span> </a> </p> </div> </li> <li> <div class="fr-download"> <p> <a href="[À MODIFIER]" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet <span class="fr-download__detail"> PNG – 61,88 Ko </span> </a> </p> </div> </li> <li> <div class="fr-download"> <p> <a href="[À MODIFIER]" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet <span class="fr-download__detail"> JPG – 261,88 Ko </span> </a> </p> </div> </li> </ul> </div>

Bloc de téléchargement

Pour mettre en avant le document à télécharger, utiliser un bloc de téléchargement. Ce bloc est une instance de la carte MD.

Structure

Il est constitué de :

  • Un cadre - obligatoire

  • Le nom du fichier en titre - obligatoire, accompagné de la mention “Télécharger”

  • Une précision de la langue (dans le libellé) - obligatoire si le document est dans une autre langue que celle de la page courante

  • Le type de fichier et son poids - obligatoire

  • Une description - optionnelle

  • Une icône de téléchargement - obligatoire.

 

1 2 3 4 5 6 7 8 9 10 <div class="fr-download fr-enlarge-link fr-download--card"> <p> <a href="[À MODIFIER - ../../../example/img/image.jpg]" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet <span class="fr-download__detail"> JPG – 61,88 ko </span> </a> </p> <p class="fr-download__desc">Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…</p> </div>

Tailles

La bloc de téléchargement peut être de largeur 4, 6 ou 8 colonnes.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div class="fr-grid-row fr-grid-row--gutters"> <div class="fr-col-12 fr-col-md-4"> <div class="fr-download fr-enlarge-link fr-download--card"> <p> <a href="[À MODIFIER - ../../../example/img/image.jpg]" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet <span class="fr-download__detail"> JPG – 61,88 ko </span> </a> </p> <p class="fr-download__desc">Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…</p> </div> </div> </div>

Règles d’utilisation

Contenus

  • Dans le bloc de téléchargement, le nom du document doit être précédé de la mention “télécharger le/la” ( ex : télécharger le rapport « Experts, acteurs, ensemble… pour une société qui change »).

Accessibilité

  • La langue du document doit être indiquée si elle est différente de la langue de la page courante.

  • Le document cible, quel que soit sont format, doit répondre aux même critères d’accessibilité que les pages web. Des informations sont disponibles sur le Guide de conception de documents bureautiques accessibles. Sinon, proposez plutôt le contenu au format html (accessible).

Remplir les métadonnées du fichier

Pour les développeurs, afin de faciliter le remplissage des données du fichier, il est possible d’ajouter sur le lien l’attribut data-fr-assess-file.
L’ajout de cet attribut, permet le récupérer et d’afficher l’extension du fichier, son poids et éventuellement sa langue.
Associé à la valeur “bytes” data-fr-assess-file="bytes" l’utilitaire converti le poids en Bytes (KB, MB…) plutôt qu’en Octets (ko, Mo). A utiliser sur les pages non francophone.

1 2 3 4 5 6 7 8 <div class="fr-download"> <p> <a href="../../../dist/favicon/favicon.ico" data-fr-assess-file download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet <span class="fr-download__detail"> </span> </a> </p> </div>

Si la langue du document est différente de la langue de la page courante. Pour cela, il est nécessaire d’ajouter l’attribut hreflang.

1 2 3 4 5 6 7 8 <div class="fr-download"> <p> <a href="../../../dist/favicon/favicon.ico" hreflang="en" data-fr-assess-file download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet <span class="fr-download__detail"> </span> </a> </p> </div>

Personnalisation

Le style de ce composant n’est pas personnalisable.

Toutefois, certains éléments sont optionnels - voir la structure du composant.

 

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :