Introducción Desarrollaba una aplicación en React para descargar entradas de Qiita obtenidas desde la API de Qiita como archivos .md. Al probar con varias entradas y al intentar descargarlas todas a la vez apareció un comportamiento extraño: aunque parecía iniciar la descarga de varias, solo se guardaba una.

Síntomas y causa real El síntoma consistente era que la primera descarga funcionaba pero la segunda y siguientes fallaban. Tras investigar, la causa raíz fue llamar a URL.revokeObjectURL(url) demasiado pronto, antes de que el navegador hubiera iniciado por completo las descargas asociadas a las URLs temporales.

Flujo del proceso de descarga masiva El proceso de descarga puede resumirse así: Crear un Blob con el texto del artículo. Crear una URL temporal con URL.createObjectURL(blob). Asignar esa URL al enlace y lanzar la descarga con a.href = url y a.click(). Cuando ya no se necesita, destruir la URL temporal con URL.revokeObjectURL(url).

El problema concreto se producía en un fragmento como este en el que revoke se ejecutaba inmediatamente después de click const url = URL.createObjectURL(blob); a.href = url; a.click(); URL.revokeObjectURL(url); Al llamar a revoke de forma inmediata el navegador descartaba la URL antes de que la descarga hubiera terminado, de modo que solo la primera URL tuvo tiempo de empezar la descarga correctamente y las siguientes quedaron inválidas.

Solución La solución fue sencilla y fiable: retrasar ligeramente la ejecución de URL.revokeObjectURL para dar tiempo al navegador a iniciar la descarga. En la práctica funcionó correctamente usando un pequeño timeout como este setTimeout(() => URL.revokeObjectURL(url), 100); Con esa espera mínima las descargas múltiples se guardan correctamente incluso al iniciarlas todas a la vez.

Implementación recomendada En resumen, al crear un Blob y generar la URL temporal, lanzar la descarga con a.click y programar la revocación con un retraso corto se evita que las URLs temporales se invaliden prematuramente. Esta práctica mejora la fiabilidad en procesos de descarga masiva desde aplicaciones cliente como las desarrolladas en React.

Sobre Q2BSTUDIO Q2BSTUDIO es una empresa de desarrollo de software que crea aplicaciones a medida y soluciones de software a medida, con experiencia en inteligencia artificial, ciberseguridad y servicios cloud. Si necesitas ayuda para desarrollar una solución que gestione descargas masivas, optimice procesos o integre agentes IA, podemos ayudarte con proyectos a medida y con la integración de herramientas de inteligencia de negocio como Power BI. Conoce nuestros servicios de desarrollo de aplicaciones a medida y descubre cómo implementamos servicios de inteligencia artificial para empresas, además de ofrecer ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas y agentes IA.

Resumen Añadir una pequeña demora antes de llamar a URL.revokeObjectURL es suficiente para resolver el error que impedía descargar varios artículos como .md. Si quieres que adaptemos esta solución a tu proyecto o que diseñemos una aplicación personalizada que incluya controles de descargas masivas, en Q2BSTUDIO podemos ayudarte.