JSZip

简介

JSZip 是一个用于创建、读取和编辑 .zip 文件的 JavaScript 库，提供简单易用的 API。它支持浏览器和 Node.js 环境，可用于生成和下载 ZIP 文件。

安装

bash

npm install jszip --save

使用

创建并下载 ZIP 文件
- FileSaver 库用于下载 ZIP 文件

javascript

import JSZip from 'jszip';
import FileSaver from 'file-saver';

// 创建一个 ZIP 实例
const zip = new JSZip();

// 创建一个文件夹
const folder = zip.folder('newFolder');

// 向文件夹中添加文件
folder.file('test.txt', 'Hello World');

// 生成 ZIP 文件
zip.generateAsync({ type: 'blob' }).then(function(blob) {
    // 使用 FileSaver.js 保存 ZIP 文件
    FileSaver.saveAs(blob, 'example.zip');
});

添加图片和其他文件

javascript

import JSZip from 'jszip';
import FileSaver from 'file-saver';

// 创建 ZIP 实例
const zip = new JSZip();

// 添加文本文件
zip.file('hello.txt', 'Hello World');

// 创建文件夹并添加图片
const imgFolder = zip.folder('images');
imgFolder.file('smile.gif', imgData, { base64: true }); // imgData 是图片的 base64 编码

// 生成 ZIP 文件
zip.generateAsync({ type: 'blob' }).then(function(blob) {
    FileSaver.saveAs(blob, 'example.zip');
});

添加文件夹

javascript

import JSZip from 'jszip';
import FileSaver from 'file-saver';

// 创建一个 JSZip 实例
const zip = new JSZip();

// 创建一个嵌套文件夹结构
const folder1 = zip.folder('folder1');
const folder2 = folder1.folder('folder2');

// 在嵌套文件夹中添加文件
folder2.file('nestedFile.txt', 'This is a nested file.');

// 生成 ZIP 文件
zip.generateAsync({ type: 'blob' }).then(blob => {
  FileSaver.saveAs(blob, 'nested-example.zip');
});

读取 ZIP 文件

javascript

import JSZip from 'jszip';

const zipBlob = fetchZipFile(); // 获取 ZIP 文件的 Blob 数据

JSZip.loadAsync(zipBlob).then(zip => {
  // 检查图片文件是否存在
  if (zip.file("images/smile.gif")) {
    // 读取图片为 Base64 格式
    zip.file("images/smile.gif").async("base64").then(base64 => {
      console.log("图片的 Base64 数据：", base64);
    });

    // 或者读取为 Blob 格式
    zip.file("images/smile.gif").async("blob").then(blob => {
      console.log("图片的 Blob 数据：", blob);
      // 可以将 Blob 数据绑定到 `<img>` 标签
      const img = document.createElement("img");
      img.src = URL.createObjectURL(blob);
      document.body.appendChild(img);
    });
  } else {
    console.log("图片文件不存在");
  }
});

读取所有文件

javascript

import JSZip from 'jszip';

const zipBlob = fetchZipFile(); // 获取 ZIP 文件的 Blob 数据

JSZip.loadAsync(zipBlob).then(zip => {
    // 遍历所有文件
    zip.forEach((relativePath, file) => {
        console.log("文件路径：", relativePath);

        // 根据文件类型读取内容
        if (file.name.endsWith(".txt")) {
            file.async("string").then(content => {
                console.log("文件内容：", content);
            });
        } else if (file.name.endsWith(".gif")) {
            file.async("base64").then(base64 => {
                console.log("图片的 Base64 数据：", base64);
            });
        }
    });
});

JSZip ​

简介 ​

安装 ​

使用 ​

JSZip

简介

安装

使用