Nel tutorial di oggi vedremo un “trucchetto” introdotto da HTML5 molto semplice e veloce ma che ad alcuni developer potrebbe essere sfuggito: l’attributo “download” del tag <a>.

Nelle nostre avventure di programmazione sul web ci capita spesso di dover far scaricare un file agli utenti: ad esempio un file PDF, un foglio CSV da passare direttamente ad Excel o anche delle immagini che non vogliamo aprire nella finestra di navigazione ma far salvare sul computer.

Fino ad oggi la soluzione era giocare con gli header HTTP che venivano inviati, cercando di convincere il browser a scaricare il file invece di aprirlo e dunque lavorando esclusivamente server-side.

L’attributo “download”

HTML5 ha introdotto un nuovo attributo del tag <a> che permette di dire esplicitamente al browser che il file indicato nell’href non deve essere aperto ma scaricato e salvato sul computer.

L’utilizzo è molto semplice – basta fare una cosa così:

oppure una cosa tipo questa (per un PDF):

e quando si cliccherà sul link il browser chiederà di salvare il file invece di mostrarlo nella sua finestra.

Come si può vedere l’unica peculiarità è l’attributo “download” all’interno del quale si può specificare il nome con cui si vorrà salvare il file.

Ecco il risultato:
Clicca qui per scaricare l’immagine
Clicca qui per scaricare il file PDF

Supporto e note

Il supporto fra i browser di questo attibuto è piuttosto buono e, come ci dice CanIUse, praticamente solo Safari non lo supporta fra i più diffusi (Microsoft lo ha introdotto nelle ultime versioni del suo nuovo browser, Edge):

caniuse

L’unica altra nota è che sia Firefox che Chrome (almeno dalla versione 45) consentono il download di file che si trovano solo sullo stesso dominio.

 

E questo è quanto. Veloce, semplice ma estremamente elegante ed efficace, no? Per chi volesse approfondire la questione il link allo standard HTML che parla di questo attributo è https://html.spec.whatwg.org/multipage/semantics.html#downloading-resources

Alla prossima!

 

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis