如何使用jszip和pdfmake生成并下载包含PDF文件的zip压缩包？

问题根因 #

• 核心是异步执行顺序错误：ddPdf.getBlob() 是异步回调方法，你调用 zip.generateAsync 生成压缩包的时候，所有PDF的Blob还没返回、也没被添加到压缩目录里，只有同步创建的txt文件被成功加入压缩包。
• 次要问题：循环内重复创建examples文件夹属于冗余操作，虽不会报错但无意义。

修复后的代码 #

// 先创建examples文件夹，避免循环内重复创建
const examples = zip.folder("examples");
// 收集所有PDF生成任务的Promise
const pdfTasks = [];

for (let i = 0; i < 3; i++) {
  const dd = {
    content: [
      "First paragraph",
      "Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines"
    ]
  };

  const ddPdf = this.$pdfmake.createPdf(dd);
  examples.file(`Hello${i}.txt`, "Hello World\n");
  // 把回调方法包装为Promise
  pdfTasks.push(new Promise(resolve => {
    ddPdf.getBlob(blob => {
      examples.file(
        `example${i}.pdf`,
        blob,
        { binary: true }
      );
      resolve();
    });
  }));
}

// 等待所有PDF生成并添加到压缩目录后，再生成压缩包下载
Promise.all(pdfTasks).then(() => {
  zip.generateAsync({ type: "blob" }).then(function(content) {
    FileSaver.saveAs(content, "example.zip");
  });
});

关键修改说明 #

• 把getBlob的回调包装成Promise，统一存入数组，使用Promise.all等待所有PDF生成、添加到压缩包的操作全部完成后，再执行zip.generateAsync生成最终压缩包
• 把examples文件夹的创建移到循环外，减少冗余操作

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