使用JSZip创建Zip文件

JSZip是一个用于创建和解压缩Zip文件的JavaScript库。它支持文件和文件夹的添加、删除、重命名和压缩。在本文中，我们将介绍如何使用JSZip库创建Zip文件。

安装

你可以通过npm或CDN来安装JSZip。这里我们使用npm来安装JSZip。

在终端运行以下命令：

npm install jszip

使用

在你的JavaScript代码中，首先需要引入JSZip库：

import JSZip from 'jszip';

然后你可以创建一个Zip文件：

const zip = new JSZip();

添加文件

使用file方法，你可以将文件添加到Zip文件：

zip.file("hello.txt", "Hello World\n");

这行代码将创建一个名为hello.txt的文件，内容为Hello World。

添加文件夹

使用folder方法，你可以将文件夹添加到Zip文件：

const folder = zip.folder("example");

这行代码将创建一个名为example的文件夹。

添加文件夹和文件

使用file和folder方法，你可以将文件夹和文件添加到Zip文件：

const folder = zip.folder("example");

folder.file("hello.txt", "Hello World\n");
folder.file("world.txt", "Hello JSZip\n");

这行代码将创建一个名为example的文件夹，并在其内部创建两个文件hello.txt和world.txt。

生成Zip文件

将所有的文件和文件夹添加到Zip文件后，你可以生成Zip文件：

zip.generateAsync({ type: "blob" }).then(function(content) {
  // 保存Zip文件到磁盘
  saveAs(content, "example.zip");
});

这行代码将生成一个Zip文件，类型为blob，然后你可以将其保存到磁盘。

完整示例

下面是一个完整的示例代码，其中我们创建了一个名为example.zip的Zip文件，并在其中添加了一个名为example的文件夹，文件夹内包含两个文件hello.txt和world.txt：

import JSZip from 'jszip';
import { saveAs } from 'file-saver';

const zip = new JSZip();

const folder = zip.folder("example");
folder.file("hello.txt", "Hello World\n");
folder.file("world.txt", "Hello JSZip\n");

zip.generateAsync({ type: "blob" }).then(function(content) {
  saveAs(content, "example.zip");
});

总结

本文介绍了如何使用JSZip创建Zip文件，并向你展示了如何添加文件和文件夹。现在你可以开始使用JSZip创建自己的Zip文件了。