Uso del atributo download de HTML5

Con el desarrollo de HTML5 fueron varios los elementos que se añadieron para enriquecer la funcionalidad dentro de los formularios. Nuevas APIs, nuevos atributos y nuevos campos de entrada, han permitido que los formularios tomen un gran impulso para adaptarse positivamente a las necesidades actuales de los usuarios de Internet.

Como suele suceder con las presentaciones de proyectos, las principales adiciones, aquellas que representan un cambio mucho más notorio, tienden a opacar las pequeñas pero importantes mejoras que se hacen para optimizar la funcionalidad. Tal fue el caso del atributo download, una adición poco promocionada, pero que nos puede ayudar a mejorar la usabilidad de nuestro sitio.

Es del conocimiento de todos, que existen archivos que el navegador no descarga automáticamente al acceder a ellos, como por ejemplo las imágenes, las páginas html u algún otro tipo de archivo como los pdf, claro, dependiendo de la configuración del navegador. Gracias al atributo download, el navegador puede obtener una orden desde el código, para que nativamente estos tipos de archivos se descarguen automáticamente en tu sitio, sin necesidad de recurrir a alguna librería externa, ni a JavaScript en absoluto.

Esta funcionalidad puede resultar muy útil, para cuando desarrollemos una aplicación que necesite que el usuario este descargando constantemente alguno de estos tipos de archivos, por ejemplo tenemos los sitios donde se suben y alojan álbumes de fotos, el usuario puede tener la opción de bajar imágenes sin necesidad de tener que recurrir a su despliegue y al botón secundario del mouse.

Definición del atributo

El atributo download, es un elemento que al estar presente, indica una descarga directa del archivo al que apunte el hipervínculo donde fue agregado. Dicho atributo puede tener un valor, en caso de tenerlo, este especifica el nombre de archivo predeterminado que el autor del sitio recomienda para su uso en el sistema de alojamiento local del usuario. No existe ninguna clase de restricción en cuanto a los valores permitidos, pero debe ser del conocimiento del autor del sitio, que ciertos sistemas operativos si manejan restricciones en cuanto a la clase de nombres que pueden manejar, por lo que puede que dicho valor sea modificado una vez que el usuario guarde el archivo en su equipo.

Uso del atributo download

Como el atributo download no utiliza ninguna clase de scripts para funcionar, basta con añadir la cadena “download” dentro del tag HTML que contiene la referencia al elemento que deseamos descargar:

<a href="lawebera.png" download>Descarga la imagen</a>

Tan sencillo como eso, con este código hemos establecido un hipervínculo donde el usuario podrá dar clic para descargar directamente el archivo “lawebera.png”.

Como ya mencionamos, este atributo también puede recibir un valor, el cual nos permite definir el nombre que el archivo recibirá en el equipo del usuario. Esta funcionalidad es muy útil para evitar el uso nombres de archivos complejos en el lado del cliente, promoviendo una mejor experiencia del usuario. Para poder proveer dicho nombre basta con agregar un valor al atributo, de la siguiente manera:

<a href="9993998879874_2013_05_22.png" download="lawebera" >Descarga la imagen</a>

Como pueden notar, no hubo necesidad de agregar de nuevo la extensión en el nombre nuevo del archivo, el navegador se encarga de manejar eso automáticamente.

Compatibilidad con navegadores

Actualmente, sólo los navegadores Chrome en su versión 14 o superior y Firefox en su versión 20 o superior, permiten el uso de este atributo, así que en caso de que tu sitio ofrezca soporte a navegadores viejos, tendrás que hacer uso de un poco de JavaScript para detectar si este atributo es soportado. Para hacerlo, un código como el siguiente te puede ayudar:

var a = document.createElement('a');

if(typeof a.download != "undefined"){
   //El atributo es soportado
}
else {
   //El atributo no es soportado
}

Conclusión

Teniendo en mente todo lo que se ha logrado añadir a la funcionalidad de las páginas gracias a HTML5, el atributo donwload puede llegar a parecer una mejora sin mucha importancia, pero sin duda es algo que debió haberse implementado hace mucho tiempo. En la actualidad, su uso nos va a permitir mejorar la usabilidad del sitio y simplificar uno de los procesos más realizados por los usuarios.