Estoy trabajando en una aplicación React.js, tengo un ciclo de j=1 a j=2000 y quiero descargar un archivo zip cuando j=1 o j=2000.
El problema es que los dos archivos zip se descargaron al mismo tiempo después del final del ciclo. en otras palabras, la descarga de los dos zip comienza cuando j = 2000.
Traté de hacer que la generación de zip fuera sincrónica usando async y await, pero no funcionó para mí.
const generateCollection = async ()=>{ for(var j = 1; j <= 2000; j++){ let zip = new JSZip(); let metadata = zip.folder("metadata"); const obj = {name: "Simple name", age: "Simple age"} metadata.file(`1.json`, JSON.stringify(obj, null, 4)) console.log("Start Downloading: ", j) if(j===1 || j===2000){ await zip.generateAsync({type:"blob"}) .then(content=>{ setIsLoading(false) FileSaver.saveAs(content, `collection_${j}.zip`); console.log("Saved...... ", j) }) } } }Agradeceré cualquier ayuda, o sugerencia!!
El problema aquí no es con el método generateAsync, sino con saveAs, que se retrasa hasta que la CPU esté disponible y no se puede esperar como se informa aquí:
https://github.com/eligrey/FileSaver.js/issues/389
Una solución podría ser no esperar en absoluto, sino convertir el bucle en un evento asíncrono para darle al navegador tiempo para mostrar el cuadro de diálogo Guardar entre las iteraciones:
const generateCollection = ()=> { var j = 1; const loop = function() { if (j <= 2000) { let j2 = j; //Create a local copy of the loop var let zip = new JSZip(); let metadata = zip.folder("metadata"); const obj = {name: "Simple name", age: "Simple age"}; metadata.file(`1.json`, JSON.stringify(obj, null, 4)); console.log("Start Downloading: ", j) if (j2===1 || j2===2000){ zip.generateAsync({type:"blob"}) .then(content=>{ saveAs(content, `collection_${j2}.zip`); console.log("Saved...... ", j2) }); } j++; setTimeout(loop, 0); } }; setTimeout(loop, 0); } $(function() { generateCollection(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>Tenga en cuenta que el código anterior no funciona dentro del violín debido a restricciones de seguridad, debe colocarlo en otro lugar.