Angular 18中如何通过异步动态导入正确使用JSZip？

你遇到的问题是因为动态导入JSZip时，拿到的是模块命名空间对象，而非直接的构造函数。正确的做法是提取模块的默认导出作为JSZip构造函数，具体写法如下：

写法一：显式获取默认导出 #

async exportDatabase(): Promise<Blob> {
  // 动态导入JSZip模块
  const JSZipModule = await import('jszip');
  // 提取默认导出的构造函数
  const JSZip = JSZipModule.default;
  // 创建JSZip实例
  const zip = new JSZip();

  for (const [id, archive] of this.archives) {
    zip.file(`${id}.txt`, archive.exportArchive());
  }

  return await zip.generateAsync({ type: "blob" });
}

写法二：解构赋值简化 #

async exportDatabase(): Promise<Blob> {
  // 直接解构获取默认导出的构造函数
  const { default: JSZip } = await import('jszip');
  const zip = new JSZip();

  for (const [id, archive] of this.archives) {
    zip.file(`${id}.txt`, archive.exportArchive());
  }

  return await zip.generateAsync({ type: "blob" });
}

错误原因说明 #

• 当使用await import('jszip')时，返回的是模块对象，这个对象包含了模块的所有导出项（包括默认导出和命名导出）。你之前静态导入的JSZip其实是模块的默认导出，对应到动态导入的模块对象里就是.default属性。
• 你之前尝试直接new JSZip()（此时JSZip是模块对象），或者直接调用JSZip.file()（模块对象没有实例方法），自然会报错——模块对象本身只提供loadAsync这类静态方法，而file、generateAsync都是JSZip实例的方法，必须先通过构造函数创建实例才能调用。

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