Cómo utilizar el atributo de descarga HTML5

HTML5 viene con todas las nuevas APIs, los nuevos tipos de entrada y los atributos de los formularios. Como suele ser el caso, las principales adiciones a menudo oscurecen las mejoras de menor importancia, y creo que esto es particularmente cierto en el atributo de descarga.

Como ustedes saben, hay algunos archivos que el navegador no descarga automáticamente, imágenes, páginas web y otros dependiendo de la configuración de su navegador, a veces incluso los archivos PDF. El atributo descarga le da al navegador una manera nativa para descargar estos archivos de forma automática, sin tener que recurrir a JavaScript. Esto es muy útil para cualquier aplicación que se ocupa de la descarga de imágenes, como sitios de carga de imágenes.

Usando el atributo de descarga

Dado que el atributo descarga no se utilizan secuencias de comandos de cualquier tipo, es tan simple como añadir el atributo de su enlace:

[code lang=»html»]
<a href="myFolder/myImage.png" download>Download image</a>
[/code]

Lo bueno de este atributo es que incluso se puede establecer un nombre para el archivo descargable, aun cuando no sea el nombre de su servidor. Esto es ideal para sitios con nombres de archivos complejos, o imágenes, incluso creados de forma dinámica, que quieren proporcionar un nombre de archivo simple y fácil de usar. Para proporcionar un nombre, sólo agrega un signo igual, seguido por el nombre que desea utilizar rodeada entre comillas, así:

[code lang=»html»]
<a href="myFolder/reallyUnnecessarilyLongAndComplicatedFileName.png" download="myImage">Download image</a>
[/code]

Tenga en cuenta que el navegador agregará automáticamente la extensión correcta al archivo descargado, por lo que no es necesario incluirla dentro de su valor de atributo.

Compatibilidad con navegadores

Actualmente, sólo el Chrome 14+ y Firefox 20+ admite el atributo descarga, por lo que es posible que tenga que recurrir a algunas tecnicas sencillas de JavaScript para detectar si se admite el atributo. Puede hacerlo de esta manera:

[code lang=»js»]
var a = document.createElement(‘a’);

if(typeof a.download != "undefined")
{
// download attribute is supported
}
else
{
// download attribute is not supported
}
[/code]

Teniendo en cuenta todo lo que se ha agregado a HTML5, el atributo de descarga es una parte muy pequeña, pero en mi opinión es un atributo que fue necesario hace mucho tiempo, y sin duda tiene sus usos en aplicaciones de hoy en día, tanto para la usabilidad y la simplificación.