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 hasta él.

En Descarga de recursos:

Nota: El atributo download, si está presente, indica que el autor pretende que el hipervínculo se use 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. Este valor se puede anular con el parámetro filename del encabezado HTTP Content-Disposition.

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 trabaja con las URLs blob: URLs y filesystem: URLs. Les dará a los usuarios una forma de descargar el contenido creado o modificado en 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.