En este post vamos a ver cómo descargar un archivo en segundo plano usando JavaScript del lado del cliente y la función fetch para hacer peticiones HTTP.

Veremos cómo descargar un archivo como blob usando AJAX para después preguntar al usuario en dónde guardarlo, sugiriendo un nombre.

Lo bueno de esto es que podemos enviar parámetros para solicitar la descarga del archivo (por ejemplo, si el mismo estuviera protegido por contraseña o autentificación).

Crear petición HTTP con fetch

Como lo dije anteriormente, puedes hacer cualquier tipo de petición, no siempre debe ser una GET. Eso depende de ti, yo he probado incluso con peticiones POST enviando información, por ejemplo:

const respuesta = await fetch("http://localhost:2106/auth/exportar_bd", {
    method: "POST",
    credentials: 'include',
    body: JSON.stringify({
        contraseña: "123",
        idNegocio: 1,
    }),
})

Pero la URL depende de ti, así como la respuesta del servidor. Lo que no cambia será el manejo.

Nota: recuerda que para que await funcione debes estar dentro de una función asíncrona. Si no te gusta, puedes usar fetch(...).then()

Descargar archivo con JavaScript

Una vez que tenemos la respuesta, la decodificamos como blob y creamos un enlace que tendrá el contenido del blob (no te preocupes, no será el enlace de la petición, sino uno especial):

const contenidoDelArchivo = await respuesta.blob();
const a = document.createElement("a");
const url = URL.createObjectURL(contenidoDelArchivo);
a.href = url;
a.download = "nombre_del_archivo_sugerido.extensión";
a.click();
URL.revokeObjectURL(url);

De hecho el código es muy parecido a cuando creamos y descargamos un archivo con JavaScript, pero ahora estamos descargándolo desde un servidor.

Con eso la descarga será hecha en segundo plano y luego se le va a preguntar al usuario cómo quiere guardar el archivo.

La ventaja de esto es que solo usamos JavaScript del lado del cliente para hacer la descarga, y podemos enviar parámetros a la petición, no estamos obligados a hacer una petición GET insegura.

Nota: si quieres ver esto en acción puedes ver mi vídeo donde exporto una base de datos usando exactamente este código.