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

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

En Cómo descargar recursos:

Por ejemplo, si haces clic en el siguiente vínculo, se descarga el .png como "MyGoogleLogo.png". en lugar de navegar a su valor href: descárgalo. El lenguaje de marcado de 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] estará cuando se trabaje con las URLs de blob: URLs y filesystem: URLs. Les dará a los usuarios una forma de descargar el contenido creado o modificado dentro de tu app.

Demostración completa

Cabe destacar que, en el ejemplo anterior, la imagen tiene el mismo origen con respecto al sitio web. Si intentas usar un vínculo de imagen de otro origen, es posible que no funcione como vínculo de navegación en lugar de como vínculo de descarga. Esto se debe a que muchas versiones del navegador no admiten la política de descarga en archivos de origen cruzado. Por ejemplo, las versiones de Chrome anteriores a la 65 permitían la descarga de archivos de origen cruzado y dejó de estar disponible en versiones posteriores. Para obtener más información, consulta este artículo. 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.