El Atributo DOWNLOAD

Permite forzar la descarga de un archivo cuando un usuario hace clic en un enlace, en lugar de navegar al recurso.

El atributo download en HTML permite forzar la descarga de un archivo cuando un usuario hace clic en un enlace, en lugar de navegar al recurso. Es especialmente útil para compartir documentos, imágenes o cualquier archivo que quieras que el usuario guarde en su dispositivo. Aquí un tutorial completo:

Sintaxis Básica

El atributo download se aplica a la etiqueta <a>, y puede incluir un valor opcional para sugerir un nombre de archivo:

<!-- Sin nombre personalizado -->
<a href="ruta/al/archivo.pdf" download>Descargar PDF</a>

<!-- Con nombre personalizado -->
<a href="ruta/al/archivo.pdf" download="informe-final.pdf">Descargar</a>

¿Cómo Funciona?

  • Descarga directa: Al hacer clic, el navegador descarga el archivo en lugar de abrirlo.

  • Nombre del archivo:

    • Si se omite el valor (download sin valor), el nombre será el mismo que el del archivo en el servidor.

    • Si se especifica (download="nombre"), el navegador usará ese nombre (solo aplica para recursos del mismo origen).

Ejemplos Prácticos

Ejemplo 1: Descargar una imagen

<a href="foto.jpg" download="vacaciones-2023.jpg">
  <img src="foto.jpg" alt="Vacaciones" width="200">
</a>

Ejemplo 2: Descargar un archivo generado dinámicamente

Usando JavaScript para crear y descargar un archivo CSV:

<button onclick="descargarCSV()">Exportar a CSV</button>

<script>
  function descargarCSV() {
    const contenido = "Nombre,Edad
Juan,25
Ana,30";
    const blob = new Blob([contenido], { type: "text/csv" });
    const url = URL.createObjectURL(blob);
    
    const enlace = document.createElement("a");
    enlace.href = url;
    enlace.download = "datos.csv";
    enlace.click();
    
    URL.revokeObjectURL(url);
  }
</script>

Consideraciones Clave

Seguridad y Políticas

  • Mismo origen: El atributo download solo funciona para recursos del mismo dominio o que cumplan con políticas CORS.

  • Recursos externos: Si el archivo está en otro dominio, el navegador ignorará download y abrirá el recurso en una nueva pestaña.

Tipos de Archivo

  • Funciona con cualquier tipo: PDF, imágenes (JPG, PNG), documentos (TXT, CSV), etc.

  • Algunos navegadores pueden mostrar advertencias para tipos ejecutables (ej: .exe).

Compatibilidad en Navegadores

  • Soportado en: Chrome, Firefox, Edge, Safari (versiones modernas).

  • No soportado en: Internet Explorer, Opera Mini.

Alternativa para navegadores antiguos:

<a href="archivo.pdf" download onclick="return confirm('¿Descargar el archivo?');">
  Descargar PDF
</a>

Mejores Prácticas

  • Nombres claros: Usa nombres descriptivos en download (ej: informe-enero.pdf).

  • Experiencia de usuario: Añade íconos o textos claros (ej: "Descargar informe").

  • Verifica el origen: Asegúrate de que el recurso esté en tu dominio o tenga CORS habilitado.

Casos de Uso Avanzados

Descargar contenido generado en el cliente

Crea archivos en tiempo real (CSV, texto, imágenes) y permite su descarga:

<button onclick="descargarTexto()">Descargar TXT</button>

<script>
  function descargarTexto() {
    const texto = "Este es un archivo generado dinámicamente.";
    const blob = new Blob([texto], { type: "text/plain" });
    const url = URL.createObjectURL(blob);
    
    const enlace = document.createElement("a");
    enlace.href = url;
    enlace.download = "archivo.txt";
    document.body.appendChild(enlace);
    enlace.click();
    document.body.removeChild(enlace);
    URL.revokeObjectURL(url);
  }
</script>

Forzar descarga de archivos en PHP

Si el recurso está en otro dominio, puedes usar un script del servidor:

PHP:

<?php
$url = "https://otro-dominio.com/archivo.pdf";
header("Content-Type: application/pdf");
header("Content-Disposition: attachment; filename=archivo.pdf");
readfile($url);
?>

Errores Comunes

Error 1: Usar download en recursos externos

<!-- No funcionará -->
<a href="https://externo.com/archivo.pdf" download>Descargar</a>

Error 2: Olvidar el atributo href

<!-- Enlace no válido -->
<a download>Descargar</a>

Conclusión

El atributo download es una herramienta sencilla pero poderosa para mejorar la experiencia de descarga en tu sitio web. Al usarlo correctamente, garantizas que los usuarios puedan guardar archivos fácilmente, ya sean estáticos o generados dinámicamente. ¡Perfecto para portfolios, documentos legales o herramientas de exportación de datos!