Para gestionar la descarga de archivos directamente desde el navegador utilizando JavaScript, es fundamental manipular objetos Blob y URLs temporales. A continuación se detalla un enfoque modular para convertir cadenas codificadas en Base64 y generar documentos compatibles con hojas de cálculo.

Conevrsión de Base64 a Objeto Blob

El primer paso consiste en transformar la cadena de texto codificada en un arreglo de bytes binarios. Esto permite crear un objeto Blob que el navegador puede interpretar como un archivo descargable.

function decodificarBase64(cadenaBase64) {
    const cadenaBinaria = atob(cadenaBase64);
    const longitud = cadenaBinaria.length;
    const arrayEnteros = new Uint8Array(longitud);
    
    for (let i = 0; i < longitud; i++) {
        arrayEnteros[i] = cadenaBinaria.charCodeAt(i);
    }
    return new Blob([arrayEnteros]);
}

Función Genérica de Descarga

Una vez obtenido el Blob, se crea un elemento de anclaje temporal en el DOM para iniciar la descarga automáticamente. Es importante limpiar el DOM eliminando el elemento después de la ejecución.

function ejecutarDescarga(datosBase64) {
    const objetoBlob = decodificarBase64(datosBase64);
    const urlTemporal = URL.createObjectURL(objetoBlob);
    const enlace = document.createElement("a");
    
    enlace.href = urlTemporal;
    enlace.download = "reporte_" + obtenerFechaFormateada() + ".xlsx";
    
    document.body.appendChild(enlace);
    enlace.click();
    document.body.removeChild(enlace);
}

Generación de Contanido para Excel

Para crear archivos que se abran en Excel sin problemas de codificación (especialmente con carcateres especiales), se debe añadir una marca BOM al inicio del contenido CSV y estructurar los datos correctamente.

function crearArchivoReporte(registros) {
    const pais = "España";
    let contenido = `País,${pais},ID Pedido,0001,Referencia,${registros.id}\r\n`;
    contenido += 'Ítem,Número Contrato,Prioridad,Fecha Entrega\r\n';

    for (let i = 0; i < registros.lista.length; i++) {
        const fila = registros.lista[i];
        contenido += `${i + 1},${fila.contrato}\t,${fila.prioridad},${fila.fecha}\t,\r\n`;
    }

    let blobDatos = new Blob([contenido], { type: "text/plain;charset=utf-8" });
    // Añadir BOM para evitar problemas con caracteres especiales
    blobDatos = new Blob([new Uint8Array([0xEF, 0xBB, 0xBF]), blobDatos], { type: blobDatos.type });
    
    const url = window.URL.createObjectURL(blobDatos);
    const vinculo = document.createElement("a");
    vinculo.href = url;
    vinculo.download = `${pais}_detalle_${registros.id}.csv`;
    document.body.appendChild(vinculo);
    vinculo.click();
    document.body.removeChild(vinculo);
}

Utilidad de Formato de Fecha

Para nombrar los archivos de manera única, se utiliza una función que devuelve la marca de tiempo actual en un formato compacto.

function obtenerFechaFormateada() {
    const ahora = new Date();
    const year = ahora.getFullYear();
    const mes = (ahora.getMonth() + 1).toString().padStart(2, '0');
    const dia = ahora.getDate().toString().padStart(2, '0');
    const horas = ahora.getHours().toString().padStart(2, '0');
    const minutos = ahora.getMinutes().toString().padStart(2, '0');
    const segundos = ahora.getSeconds().toString().padStart(2, '0');
    
    return `${year}${mes}${dia}${horas}${minutos}${segundos}`;
}