Wat doet het download attribuut als je deze toevoegt aan een hyperlink? Dat leg ik in deze blog met voorbeelden uit.

Vandaag werd mij gevraagd een aantal kleine dingen aan te passen aan een website. Eén van die kleine dingen was het toevoegen van een link om een PDF bestand te downloaden. Nou is dat niet heel moeilijk, dus dat was zo gepiept. Vijf minuten later hing de opdrachtgever aan de telefoon met de volgende vraag: “Kan je het zo maken dat de PDF meteen wordt gedownload zodra mensen op die link klikken?”

Vanaf vandaag weet ik dat het kan. Het kan namelijk op verschillende manieren:

1. Het aanpassen van je instellingen van de browser (dit verschilt per browser, Google even om erachter te komen hoe dat in jouw browser ingesteld moet worden).
2. Door op de link te gaan staan en dan met je rechtermuisknop te kiezen voor ‘Link opslaan als…
3. Het toevoegen van het ‘download’ attribuut in de hyperlink

Het download attribuut

Heel eerlijk, die laatste optie wist ik niet (meer). Als je aan een hyperlink het attribuut download toevoegt, dan worden bestanden die aan de hyperlink zijn gekoppeld meteen gedownload, zonder dat ze in de browser worden geopend. Dit attribuut gebruik je alleen als ook het href attribuut wordt gebruikt.

<a href="/pad/naar/het/bestand.pdf" download>Download deze pdf</a>

Geef je het download attribuut een waarde mee, dan zal de filenaam van het bestand deze waarde krijgen. De browser zelf is zo intelligent dat deze de bestandsextensie kan detecteren (bijv.: .pdf, .txt, .html, etc…)

<a href="/pad/naar/het/bestand.pdf" download="pdfnaam">Download deze pdf</a>

In het eerste voorbeeld zal het gedownloade bestand als bestand.pdf worden opgeslagen. In het tweede voorbeeld zal het gedownloade bestand als pdfnaam.pdf worden opgeslagen.

Het download attribuut wordt in de volgende browsers ondersteund:
– Chrome
– Microsoft Edge
– Firefox
– Safari
– Opera

Meer weten over dit attribuut? Check dan de uitleg op w3schools.com (engelstalig).

Dank je wel Barry en Mark, vandaag leerde ik dit door jullie vraag.