Quick Tip: Gebruik maken van het HTML5 “download” Attribuut

Het maken van een download link in HTML is simpel; plaats een anchor tag en laat het verwijzen naar het te downloaden bestand in het download attribuut. Sommige bestandstypen (zoals afbeeldingen, .pdf, .txt en .doc bijvoorbeeld) worden niet gedownload door de browser. Deze bestanden worden direct in de browser getoond.

Als je toegang hebt tot de webserver, kun je deze wel configureren om dergelijke bestanden te downloaden, bijvoorbeeld door het .htaccess bestand aan te passen. Als je je website host bij een van de gratis diensten als Wordpress.com, Blogspot of Github pages, kun je dat echter niet doen. Overweeg in zo'n geval om gebruik te maken van het download attribuut.

Het "Download" Attribuut gebruiken

Het download attribuut is onderdeel van de HTML5 spec en markeert een link als download link in plaats van een navigatie link.

Met het download attribuut kun je ook de uiteindelijk (gedownloade) bestandsnaam aanpassen. Het kan zijn dat het bestand op de server een automatisch gegenereerde naam heeft gekregen met nummers en koppeltekens, bijvoorbeeld acme-doc-2.0.1.txt. Het zou mooier zijn voor de gebruiker om een bestand met een wat leesbaarder naam te downloaden, bijvoorbeeld Acme Documentation (ver. 2.0.1).txt (de extensie niet vergeten uiteraard).

In de praktijk

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

Bekijk het voorbeeld op de demopagina, en je zult zien dat het bestand gedownload wordt met de naam zoals die aangegeven is in het download attribuut.

Een aantal aandachtspunten

• Firefox staat het downloaden van bestanden op deze manier alleen toe als deze van hetzelfde domein als de webpagina komen, in verband met een security issue. Het bestand moet van je eigen server of domeinnaam komen, anders zal de browser het bestand zelf (proberen te) openen.
• Opera en Chrome (Chromium en Blink) staan je toe om cross-origin files te downloaden, maar zullen de waarde van het attribute negeren. Met andere woorden, de bestandsnaam blijft ongewijzigd.

Een Fallback aanbieden

Ten tijde van schrijven van dit artikel is het download attribuut nog niet geïmplementeerd in Safari en (zoals verwacht) in Internet Explorer. Dat gezegd hebbende, staat deze feature op dit moment bovenaan de lijst van de modern IE status pagina en is bezig een aanzienlijke hoeveelheid stemmen voor implementatie te ontvangen.

In de tussentijd kunnen we een prima fallback aanbieden, zoals het geven van extra instructies onder de download link voor de browsers die dit nog niet ondersteunen. Om dat te doen moeten we Modernizr met de download feature test downloaden.

Daarna voegen we het volgende script toe.

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));
		}

	});
}

Het script test of de browser het download attribuut ondersteunt; zo niet dan wordt er een div met een class voor styling en instructie-tekst aan de pagina toegevoegd, en achter iedere link met een download attribuut gezet.

Concluderend

Het download attribuut maakt het maken van download links handig en gemakkelijk voor wie geen toegang heeft tot de configuratie van zijn of haar server. Nice! Hopelijk implementeren Safari en Internet Explorer het download attribuut snel!