Cómo utilizar el atributo download en un elemento <a>
El atributo download en un elemento <a> permite que los navegadores descarguen el archivo vinculado directamente, en lugar de abrirlo en una nueva pestaña o ventana. Este atributo es ideal para ofrecer archivos descargables, como documentos, imágenes o programas.
¿Qué es el atributo download?
El atributo download especifica que el recurso vinculado debe descargarse en lugar de ser mostrado. Además, puede incluir un valor para renombrar el archivo descargado. Es compatible con la mayoría de los navegadores modernos.
Ejemplo básico
<a href="archivo.pdf" download>Descargar archivo</a>
En este ejemplo, al hacer clic en el enlace, el navegador descargará el archivo archivo.pdf.
Renombrar el archivo al descargar
Puedes definir un nombre personalizado para el archivo descargado utilizando el valor del atributo download.
<a href="archivo.pdf" download="documento-renombrado.pdf">Descargar archivo</a>
En este caso, el archivo se guardará como documento-renombrado.pdf independientemente de su nombre original en el servidor.
Consideraciones importantes
1. Origen del archivo: El archivo debe estar alojado en el mismo dominio del sitio que lo ofrece, o bien el servidor debe permitirlo mediante la configuración CORS.
2. Compatibilidad del navegador: Aunque el atributo download está ampliamente soportado, es recomendable verificar en navegadores más antiguos.
3. Seguridad: Asegúrate de que los archivos para descargar no contengan contenido malicioso.
Ejemplos prácticos
Descargar una imagen
<a href="imagen.jpg" download="mi-foto.jpg">Descargar imagen</a>Descargar un archivo comprimido
<a href="documentos.zip" download>Descargar documentos</a>Referencia oficial
Para más información, puedes consultar la documentación en MDN Web Docs.
Jorge García
Fullstack developer