Atributo download HTML5 para descargar archivos del servidor mediante enlaces

Nueva entrada para repasar el atributo download HTML5, su funcionalidad es la de indicar al navegador que la url del enlace es un archivo de descarga.

Otros elementos de HTML5 interesantes son:

• HTML5 video
• HTML5 audio
• input date HTML5

Sintaxis del atributo download HTML5

Veamos la sintaxis extraída de su web oficial:

<a download="nombre_archivo" href="url_del_fichero">Anchor text</a>

<a download href="url_del_fichero">Anchor text</a>

Como podéis apreciar este atributo es muy sencillo, os lo explico:

• Atributo download (opcional): Con este atributo especificamos que en la url del enlace tenemos un archivo (fichero, imagen…) para descargar, al clickar el archivo comenzará a descargarse. Cuando no se especifica el nombre_archivo el fichero descargado tendrá el nombre original con el que está guardado en el servidor.

De esta manera el navegador entiende que el fichero se tiene que descargar en vez de mostrar o reproducirlos. Por ejemplo es últil en los ficheros multimedia como pueden ser imágenes, audios o similares en los que en la mayoría de ocaciones al acceder a ellos mediante url se repducen en el navegador.

Ejemplos del atributo download HTML5

Vayamos con estos 2 ejemplos del atributo download:

<a download="mi-nombre-nuevo.mp3" href="https://www.anerbarrena.com/demos/2016/014-audio-helicoptero.mp3">Enlace para descargar mp3 con otro nombre de descarga.</a>

En este primer ejemplo tenemos un mp3 alojado en el servidor:

• Hemos declarado el atributo download con un nuevo nombre de fichero, este nuevo nombre sustituye al original.
• Al clicak en el enlace comenzará a descargarse el fichero mp3.

<a download href="https://www.anerbarrena.com/demos/2016/014-audio-helicoptero.mp3">Enlace para descargar mp3 con su nombre original</a>

En este segundo ejemplo solo hemos declarado el atributo download, por lo que el fichero se descargará con su nombre original.