¿Cómo puedo hacer que un enlace se descargue en lugar de navegar con el atributo download?

Para lograr que un enlace (<a>) inicie la descarga de un archivo en lugar de que el navegador intente mostrarlo (por ejemplo, un PDF o una imagen que quieres que el usuario guarde directamente), puedes utilizar el atributo download. Este atributo le indica al navegador que el destino del enlace (especificado en el atributo href) debe ser tratado como un archivo para descargar.

¿Cómo se usa el atributo download?

El atributo download se puede usar de dos maneras dentro de la etiqueta <a>:

1. Como un atributo booleano (sin valor específico):
   Si simplemente añades el atributo download al enlace, el navegador intentará descargar el recurso utilizando el nombre de archivo original que se infiere de la URL o que es proporcionado por el servidor a través de la cabecera HTTP Content-Disposition.
   
   <p>Descarga nuestro catálogo completo:</p>
<a href="/ficheros/catalogo_productos_2025.pdf" download> Descargar Catálogo (PDF) </a>
   
   Al hacer clic en este enlace, el navegador iniciará la descarga del archivo catalogo_productos_2025.pdf.
2. Con un valor asignado (para especificar un nombre de archivo):
   Puedes darle un valor al atributo download para sugerir un nombre de archivo específico con el que el usuario guardará el recurso. Esto es muy útil si quieres ofrecer un nombre de archivo más descriptivo, diferente del nombre original en el servidor, o si el recurso se genera dinámicamente y su URL no refleja un nombre de archivo claro.
   
   <p>Descarga tu informe personalizado:</p>
<a href="/api/informe-usuario?id=123&tipo=mensual" download="mi_informe_mensual_mayo_2025.docx"> Descargar mi informe de mayo (DOCX) </a>

<p>Guarda esta imagen con un nombre amigable:</p>
<a href="/galeria/img_7890_raw.jpg" download="Atardecer_en_la_playa.jpg"> Descargar foto del atardecer </a>
   
   En el primer ejemplo, aunque la URL sea compleja, el archivo se descargará como mi_informe_mensual_mayo_2025.docx.

Consideraciones Importantes:

• Política del mismo origen (Same-Origin Policy): El atributo download funciona de manera más consistente y predecible para los recursos que se encuentran en el mismo dominio que la página web que contiene el enlace.
• Recursos de origen cruzado (Cross-Origin): Para los archivos alojados en dominios diferentes, el comportamiento puede variar significativamente entre navegadores por razones de seguridad.
  • El navegador podría ignorar el atributo download (especialmente el nombre de archivo sugerido) si el servidor del recurso externo no envía las cabeceras CORS (Cross-Origin Resource Sharing) adecuadas que permitan este tipo de interacción (por ejemplo, Access-Control-Allow-Origin).
  • En muchos casos de enlaces a recursos de terceros, la cabecera HTTP Content-Disposition: attachment; filename="nombre.ext" enviada por el servidor del recurso tendrá prioridad para forzar la descarga y determinar el nombre del archivo. Si esta cabecera no está presente, el navegador podría simplemente navegar al recurso en lugar de descargarlo, o descargarlo usando el nombre de la URL.
• Tipos de Archivo: Este atributo es útil para cualquier tipo de archivo que desees que el usuario descargue: PDFs, imágenes, archivos de texto, hojas de cálculo, archivos comprimidos, ejecutables (aunque los navegadores suelen mostrar advertencias para estos últimos), etc.