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

Chrome ahora admite el nuevo atributo download de las especificaciones HTML para los elementos a. Cuando se usa, este atributo significa que el recurso al que apunta debe descargarse en el navegador en lugar de navegar hacia él.

Desde Cómo descargar recursos:

Por ejemplo, si haces clic en el siguiente vínculo, se descargará el .png como “MyGoogleLogo.png” en lugar de navegar a su valor href: Descargarme. El lenguaje de marcado correspondiente es el siguiente:

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

El beneficio real de a[download] será cuando trabajes con URLs de blob: URLs y filesystem: URLs. Brindará a los usuarios una manera de descargar el contenido creado o modificado dentro de tu app.

Demostración completa

Debes tener en cuenta 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 vínculo de descarga. Esto se debe a que muchas versiones del navegador no son compatibles con la política de descarga de archivos de origen cruzado. Por ejemplo, las versiones de Chrome anteriores a la 65 permitían la descarga de archivos de origen cruzado y quedó obsoleto en versiones posteriores. Consulta 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 de desarrollo de Chrome (14.0.835.15 y versiones posteriores) es compatible con este atributo.