Clicky

Cómo utilizar el atributo download de HTML5

atributo de HTML5 download

Hay algunos archivos que el navegador no descarga automáticamente

HTML5 viene con todas las nuevas APIs, nuevos tipos de input y atributos para 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 download.

Como sabrás, hay algunos archivos que el navegador no descarga automáticamente, imágenes, páginas web y otros, dependiendo de la configuración de tu navegador, a veces incluso archivos PDF. El atributo download le da el navegador de forma 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 download

Dado que el atributo download no utiliza secuencias de comandos de cualquier tipo, es tan simple como añadir el atributo en tu enlace:

<a href="/myFolder/myImage.png" download>Download image</a>

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 deseas utilizar rodeado entre comillas, así:

<a href="/myFolder/reallyUnnecessarilyLongAndComplicatedFileName.png" download="myImage">Download image</a>

Ten en cuenta que el navegador añade 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 Chrome 14+ y Firefox 20+ soportan el atributo download, por lo que es posible que tengas que recurrir a algunas sencillos JavaScript para detectar si se admite el atributo. Puedes hacerlo de esta manera:

var a = document.createElement('a');
if(typeof a.download != "undefined")
{
   // download attribute is supported
}
else
{
  // download attribute is not supported
}

Conclusión

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

Jesus_Caceres