Info rapide : Utiliser l'attribut HTML5 "download"

() translation by (you can also view the original English article)

Créer un lien de téléchargement en HTML est assez simple ; ajoutez une balise a et donnez le chemin d'accès au fichier dans l'attribut href. Cependant, certains types de fichiers (comme les images, les .pdf, .txt et .doc par exemple) ne seront pas téléchargés. Il seront ouvert par le navigateur.

Si vous avez accès au serveur de votre site il y a quelques astuces, comme configurer un .htaccess, vous permettant de télécharger directement ces fichiers. Si votre site est hébergé sur un service gratuit comme WordPress.com, Blogspot ou Github pages, qui ne vous permettent pas d'utiliser ces contournements, regardez du coté de l'attribut download.

Utiliser l'attribut "download"

L'attribut download fait partie de la spécification HTML5 et force un lien à être un lien de téléchargement plutot que de navigation.

L'attribut download vous permet aussi de renommer le fichier avant le téléchargement. Quand le fichier est sur le serveur, surtout s'il est généré automatiquement, il peut être nommé avec des nombres et des tirets, par exemple acme-doc-2.0.1.txt. Il serait mieux de fournir à l'utilisateur le fichier avec un nom plus explicite lors du téléchargement, comme Documentation Acme (ver. 2.0.1).txt (n'oubliez pas l'extension).

Voici à quoi cela ressemble :

1	<a href="download/acme-doc-2.0.1.txt" download="Acme Documentation (ver. 2.0.1).txt">Download Text</a>

Testez le sur la page de démonstration, et vous devriez télécharger le fichier avec le nom spécifié dans l'attribut download.

Quelques notes :

Firefox n'autorise que le téléchargement de fichier provenant du même serveur pour des raisons de sécurité. Le fichier doit provenir du même serveur ou nom de domaine, sinon il sera ouvert dans le navigateur.
Alors que Chrome et la dernière version d'Opera (avec Chromium/Blink) autorise le téléchargement des fichiers provenant de sources différentes, ils ignoreront la valeur de l'attribut. En d'autre mots, le nom de fichier sera inchangé.

Donner une alternative

Au moment où cet article a été écrit l'attribut download n'a pas été implémenté dans Safari et (comme on peut le penser) Internet Explorer. Ceci dit, selon le statut de la plateforme IE, c'est actuellement sur le haut de la pile de développement et comporte un grand nombre de votes.

Dans le même temps, il est possible d'ajouter une alternative, comme fournir des instructions supplémentaires sous le lien de téléchargement pour les navigateurs ne supportant pas cet attribut. Four ce faire, il faut télécharger Modernizr avec la fonctionnalité download incluse.

Ensuite il faut ajouter le script suivant.

if ( ! Modernizr.adownload ) {
  var $link = $('a');

	$link.each(function() {
		var $download = $(this).attr('download');
	
		if (typeof $download !== typeof undefined && $download !== false) {
      var $el = $('<div>').addClass('download-instruction').text('Right-click and select "Download Linked File"');
      $el.insertAfter($(this));
		}

	});
}

Ce script testera si le navigateur supporte l'attribut download ; sinon il ajoute une balise <div> contenant les instructions et une classe permettant de personnaliser l'affichage, et l'ajoute en dessous du lien utilisant l'attribut download.

Conclusion

L'attribut download rend les téléchargements plus accessibles aux personnes n'ayant pas accès à la configuration du serveur. J'ai hâte qu'Internet Explorer et Safari implementent l'attribut <