Blog and Web

Forzar descarga de archivos con HTML5

Para ofrecer archivos en descarga directa muchas veces es necesario evitar el comportamiento por defecto del navegador y, así, forzar la descarga de los archivos. Una forma muy común de hacerlo es por medio de instrucciones del lado del servidor, sin embargo, el nuevo estándar de HTML5 nos permitirá realizar la misma tarea solo con la incorporación de un nuevo atributo: download.

¿Cómo funciona el atributo download?

El atributo download funciona en los enlaces HTML, es decir, elementos <a /> y toma como valor un nombre para el archivo (no tiene que coincidir con su nombre real). Por ejemplo:

<a href="http://blogandweb.com/nombre-real.pdf" download="nombre-para-el-usuario.pdf">Descargar</a>

Esto dará como resultado que cuando el usuario de click sobre el enlace se presentará una ventana de descarga del archivo en http://blogandweb.com/nombre-real.pdf pero con el nombre por defecto: nombre-para-el-usuario.pdf. Este código en Chrome luce así después de dar click:

Si se quiere usar el mismo nombre de archivo del original, solo es necesario agregar el atributo download sin valor:

<a href="http://blogandweb.com/nombre-real.pdf" download>Descargar</a>

Soporte de download.


Según Can I use, download es soportado en Firefox 23+, Chrome 28+ y Opera 17+, abarcando el 46.7% del tráfico. Por tanto su uso, por ahora, debe estar acompañado de una solución de lado de servidor para tener una garantía completa.