JSZip生成Zip无法解压：寻求替代setTimeout的可靠方案

你遇到的问题本质是异步操作的时序问题：FileReader的读取是异步执行的，原来用setTimeout只是靠延迟来“碰运气”等待文件读取完成，但这种方式完全不可靠——文件多或体积大的时候5秒可能不够，文件小的时候又纯纯浪费时间。而且你看到循环里打印zip有内容，是因为那时候对应的onload已经触发了，但generateAsync执行时可能还有文件没读完，最终生成的就是空Zip（22字节正是空Zip的标准大小），macOS解压自然会报错。

正确的解决方案：用Promise控制异步流程 #

我们可以把每个文件的读取和添加操作包装成Promise，然后用Promise.all()等待所有文件处理完成后，再生成Zip文件，完全不需要依赖定时器。

修改后的代码如下：

var pages = $pagesComponentsDownloadSavetoFileinput[0].files;
var zip = new JSZip();

// 封装单个文件的读取+添加到Zip的异步操作
function addFileToZip(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    
    reader.onload = () => {
      // 注意：这里要用reader.result获取读取到的内容，File对象没有content属性！
      zip.file(file.name, reader.result);
      resolve();
    };
    
    // 处理文件读取失败的情况
    reader.onerror = () => reject(reader.error);
    
    // 如果是文本文件用readAsText，如果是二进制文件（图片、文档等）建议用readAsArrayBuffer
    reader.readAsText(file);
  });
}

// 等待所有文件都处理完成后，生成并下载Zip
Promise.all(Array.from(pages).map(addFileToZip))
  .then(() => zip.generateAsync({ type: "blob" }))
  .then((blob) => {
    console.log("生成的Blob大小：", blob.size); // 现在会显示正确的文件大小
    saveAs(blob, "TESTING.zip");
  })
  .catch((err) => {
    console.error("处理过程出错：", err);
  });

关键细节说明 #

1. 修复了原代码的小错误：原代码中zip.file(pages[i].name, pages[i].content)是错误的，File对象并没有content属性，必须用reader.result来获取读取到的文件内容。
2. 异步流程的可靠控制：Promise.all()会等待所有文件的读取和添加操作都完成后，才会执行生成Zip的逻辑，彻底避免了“提前生成空Zip”的问题。
3. 错误处理：新增了读取失败的错误捕获，方便排查文件读取异常的情况。
4. 二进制文件兼容：如果需要打包图片、PDF等二进制文件，把reader.readAsText(file)改成reader.readAsArrayBuffer(file)，避免文件内容损坏。

内容的提问来源于stack exchange，提问作者user3758078