[Autre] Forcer le chargement d'un fichier en HTML5

Lorsque vous proposez une ressource aux visiteurs de votre site (images, documents PDF ou autres, etc.), les navigateurs vont essayer de les afficher via des fonctionnalités intégrées ou des extensions/plugins.
Or, si vous souhaitez juste proposer ces ressources au téléchargement, vous serez obligé de "forcer la main" au navigateur côté serveur :

solution en PHP ;
solution en Java ;
solution en C#.

En gros, la technique consiste à associer au fichier souhaité un en-tête HTTP Content-Disposition qui indiquera que celui-ci doit être téléchargé et non affiché.

Bien entendu, si votre page est uniquement en (X)HTML, vous êtes de la revue ! La seule technique possible est de transformer votre fichier dans un format qui ne peut être affiché par le navigateur (la technique la plus classique étant de le compresser en archive zip).

Mais cela, c'était avant.
Car désormais, HTML5 vous permet de rendre vos fichiers téléchargeables, quel que soit leur format, de façon très simple.

Il suffit d'utiliser l'attribut download.

Comment s'utilise cet attribut ?
Le plus simplement du monde : en l'intégrant à la balise <a> ou <area> !

Quelle valeur donner à cet attribut ?
Celle que vous souhaitez.
Plus exactement, la valeur va correspondre au nom de fichier présélectionné dans la fenêtre de téléchargement, mais si vous ne précisez pas de valeur (download) ou si vous mettez une valeur vide (download=""), alors le nom de fichier par défaut sera celui du fichier original.
Exemples :
Code:

1 2 3 <a href="foo.png" download>Enregistrer</a> <a href="foo.png" download="">Enregistrer</a> <a href="foo.png" download="bar.png">Enregistrer</a>
Quels types de fichiers peuvent être téléchargés ?
Il n'y a pas de restriction sur les types de fichiers que vous pouvez proposer en téléchargement, néanmoins, ils devront respecter la Same Origin Policy (même domaine, même TLD, même sous domaine, même protocole, même port).
Notez aussi que vous pouvez proposer en téléchargement des fichiers encodés en base64, donc en particulier des fichiers générés depuis le navigateur.

Mais alors, mes codes serveur peuvent être téléchargés ?
Bien sûr que non, heureusement !
Si vous demandez un fichier .php par exemple sur le serveur, celui-ci sera d'abord interprété avant d'être envoyé. Ce sera donc le fichier généré qui sera récupéré et non le fichier contenant le code source.
Il est donc en revanche possible de proposer de télécharger des fichiers images (par exemples) générés dynamiquement sur le serveur.

Quel est le support des navigateur ?
C'est le bémol concernant cet attribut...
À l'heure actuelle, seuls Firefox, Chrome et Opera (en version desktop ou mobile) reconnaissent cet attribut, pour les autres navigateurs, vous devrez passer par une solution de contournement.

Comment savoir si un navigateur prend en charge download ?
Il est possible, avec JavaScript, de détecter si la fonctionnalité est supportée, pour cela, on crée un nouvel élément <a> et on vérifie s'il possède une propriété download :
Code:

1 2 3 4 5 6 7 var testA = document.createElement('a'); if('download' in testA){ // Le navigateur supporte l'attribut download } else{ // Le navigateur ne supporte pas l'attribut download }
:fleche: Voir une page d'exemple.