Cómo descargar recursos en HTML5 (a[descargar])

Eric Bidelman

Chrome ahora admite el nuevo atributo download de la especificación HTML para los elementos a. Cuando se usa, este atributo indica que el navegador debe descargar el recurso al que apunta, en lugar de navegar a él.

En Descarga de recursos:

Nota: Si está presente, el atributo download indica que el autor desea que se use el hipervínculo para descargar un recurso. El atributo puede tener un valor. Si lo tiene, especifica el nombre de archivo predeterminado que el autor recomienda para etiquetar el recurso en un sistema de archivos local. No hay restricciones sobre los valores permitidos, pero se advierte a los autores que la mayoría de los sistemas de archivos tienen limitaciones con respecto a la puntuación que se admite en los nombres de archivo, y es probable que los usuarios-agentes los ajusten según corresponda. Además, se puede asignar un valor al atributo para especificar el nombre de archivo que los agentes de usuario deben usar cuando almacenan el recurso en un sistema de archivos. El parámetro filename del encabezado HTTP Content-Disposition puede anular este valor.

Por ejemplo, si haces clic en el siguiente vínculo, se descargará el archivo .png como "MyGoogleLogo.png" en lugar de navegar a su valor href: download me. El marcado para esto es el siguiente:

<a href="http://web-central.appspot.com/.../web-fundamentals-icon192x192.png" download="WebfundamentalsLogo">download me</a>

El verdadero beneficio de a[download] será cuando se trabaje con las URLs blob: y filesystem:. Les dará a los usuarios una forma de descargar contenido creado o modificado dentro de tu app.

Demostración completa

Una cosa que debes tener en cuenta es que, en el ejemplo anterior, la imagen tiene el mismo origen en relación con el sitio web. Si intentas usar un vínculo de imagen de un origen diferente, es posible que no funcione como vínculo de navegación en lugar de vínculo de descarga. Esto se debe a que muchas versiones de navegadores no admiten la política de descarga en archivos de origen cruzado. Por ejemplo, las versiones de Chrome anteriores a la 65 permitían descargar archivos de origen cruzado, pero dejaron de estar disponibles en versiones posteriores. Lee este artículo para obtener más información. Puedes usar el encabezado Content-Disposition para forzar una descarga desde otro origen.

Compatibilidad con navegadores: Solo la versión actual del canal para desarrolladores de Chrome (14.0.835.15 y versiones posteriores) admite este atributo.