如何使用JSZip同步生成一個zip文件？

Question

我正在開發一個 React.js 應用程序，我有一個從j=1到j=2000的循環，我想在 j=1 或 j=2000 時下載一個 zip 文件。

問題是循環結束后兩個zip文件同時下載。 換句話說，兩個 zip 的下載在 j = 2000 時開始。

我試圖通過使用 async 和 await 使 zip 生成同步，但它對我不起作用。

 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) }) } } }

我將不勝感激任何幫助或建議！！

Answer 1

這里的問題不在於 generateAsync 方法，而在於 saveAs，它被延遲到 cpu 可用並且不能像這里報告的那樣等待：

https://github.com/eligrey/FileSaver.js/issues/389

一個解決方案可能是根本不等待，而是將循環轉換為異步事件，讓瀏覽器有時間在迭代之間顯示保存對話框：

 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>

請注意，由於安全限制，上面的代碼在 fiddle 中不起作用，您必須將其放在其他地方。