vue jszip

// 引入 jszip 和 文件保存库
import JSZip from 'jszip';
import { saveAs } from 'file-saver';

export default {
  methods: {
    async downloadZip() {
      // 创建一个新的 JSZip 实例
      const zip = new JSZip();

      // 添加一个文本文件到 zip 文件中
      zip.file("hello.txt", "Hello, world!");

      // 创建一个文件夹
      const imgFolder = zip.folder("images");

      // 向文件夹中添加文件
      imgFolder.file("smile.gif", "base64 encoded gif data", { base64: true });

      // 生成 zip 文件并下载
      const content = await zip.generateAsync({ type: 'blob' });
      saveAs(content, "example.zip");
    }
  }
}

解释说明：

1. 引入库：我们首先引入了 JSZip 和 file-saver 库。JSZip 用于创建和操作 ZIP 文件，而 file-saver 用于保存生成的 ZIP 文件。
2. 创建 JSZip 实例：使用 new JSZip() 创建一个新的 ZIP 文件实例。
3. 添加文件：使用 zip.file() 方法向 ZIP 文件中添加一个文本文件 hello.txt，内容为 "Hello, world!"。
4. 创建文件夹：使用 zip.folder() 方法创建一个名为 images 的文件夹。
5. 向文件夹中添加文件：使用 imgFolder.file() 方法向 images 文件夹中添加一个 GIF 文件，并指定数据为 Base64 编码格式。
6. 生成并下载 ZIP 文件：使用 zip.generateAsync() 方法生成 ZIP 文件的二进制数据，并通过 saveAs() 方法将其下载到本地，文件名为 example.zip。

这段代码展示了如何在 Vue.js 中使用 JSZip 库创建并下载包含多个文件的 ZIP 文件。