前端 JavaScript 实现 ZIP 文件打包下载

Yami
50
前端开发 #JavaScript
在前端开发中，我们经常需要实现文件打包和下载的功能。本文将详细介绍如何通过 JavaScript 和 JSZip 库来实现这一功能。

工具与库

JSZip 简介

JSZip 是一个用于前端生成 ZIP 文件的开源库，支持以下功能：

  • 创建新的 ZIP 文件
  • 将文件添加到 ZIP 包中
  • 支持嵌套文件夹结构
  • 提供下载功能
  • Vue适用

实现步骤

1. 引入 JSZip 库

可以通过以下方式引入 JSZip：

方法一：通过 npm 安装

npm install jszip

方法二：直接使用 CDN

<script src="https://cdn.jsdelivr.net/npm/jszip"></script>

2. 实现 ZIP 打包和下载功能

HTML代码

<!-- 文件选择输入 -->
<input type="file" id="fileInput" multiple />
<!-- 下载按钮 -->
<button id="downloadZip">下载 ZIP 包</button>

JavaScript代码

const fileInput = document.getElementById("fileInput");
const downloadZipButton = document.getElementById("downloadZip");

downloadZipButton.addEventListener("click", async () => {
  const files = fileInput.files;

  // 检查是否有文件被选中
  if (!files.length) {
    alert("请选择至少一个文件！");
    return;
  }

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

  // 将文件添加到 ZIP 包中
  for (const file of files) {
    const fileData = await file.arrayBuffer(); // 读取文件内容为 ArrayBuffer 格式
    zip.file(file.name, fileData); // 将文件添加到 ZIP 包
  }

  // 生成 ZIP 文件并提供下载
  zip.generateAsync({ type: "blob" }).then((content) => {
    // 创建临时下载链接
    const a = document.createElement("a");
    const url = URL.createObjectURL(content);
    a.href = url;
    a.download = "打包文件.zip";
    a.click();

    // 释放资源
    URL.revokeObjectURL(url);
  });
});

功能说明

文件选择

  • 使用 <input type="file" multiple /> 元素允许用户选择多个文件。
  • fileInput.files 属性返回用户选中的文件列表。

ZIP 文件创建

  • 使用 JSZip.file() 方法将文件添加到 ZIP 包中。
  • 通过 generateAsync() 方法生成最终的 ZIP 文件，并指定类型为 blob 格式。

下载过程

  • 创建一个 <a> 元素用于触发下载操作。
  • 使用 URL.createObjectURL() 将 Blob 对象转换为临时 URL。
  • 设置 download 属性以指定文件名，点击按钮即可触发下载。

扩展功能

1. 支持嵌套文件夹

如果需要将文件组织到特定的文件夹结构中，可以使用以下方法：

const folder = zip.folder("目标文件夹名称");
folder.file("文件名", fileData);

2. 显示打包进度

在生成 ZIP 文件的过程中，可以通过 onUpdate 回调显示实时进度：

zip.generateAsync({ type: "blob" }, (metadata) => {
  console.log(`压缩进度: ${metadata.percent.toFixed(2)}%`);
});

3. 支持多种文件类型

JSZip 支持包括图片、音频、视频等多种文件类型。只需将文件内容转换为 ArrayBuffer 或 Blob 格式即可添加到 ZIP 包中。

工具与库

JSZip 简介

JSZip 是一个用于前端生成 ZIP 文件的开源库，支持以下功能：

  • 创建新的 ZIP 文件
  • 将文件添加到 ZIP 包中
  • 支持嵌套文件夹结构
  • 提供下载功能
  • Vue适用

实现步骤

1. 引入 JSZip 库

可以通过以下方式引入 JSZip：

方法一：通过 npm 安装

npm install jszip

方法二：直接使用 CDN

<script src="https://cdn.jsdelivr.net/npm/jszip"></script>

2. 实现 ZIP 打包和下载功能

HTML代码

<!-- 文件选择输入 -->
<input type="file" id="fileInput" multiple />
<!-- 下载按钮 -->
<button id="downloadZip">下载 ZIP 包</button>

JavaScript代码

const fileInput = document.getElementById("fileInput");
const downloadZipButton = document.getElementById("downloadZip");

downloadZipButton.addEventListener("click", async () => {
  const files = fileInput.files;

  // 检查是否有文件被选中
  if (!files.length) {
    alert("请选择至少一个文件！");
    return;
  }

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

  // 将文件添加到 ZIP 包中
  for (const file of files) {
    const fileData = await file.arrayBuffer(); // 读取文件内容为 ArrayBuffer 格式
    zip.file(file.name, fileData); // 将文件添加到 ZIP 包
  }

  // 生成 ZIP 文件并提供下载
  zip.generateAsync({ type: "blob" }).then((content) => {
    // 创建临时下载链接
    const a = document.createElement("a");
    const url = URL.createObjectURL(content);
    a.href = url;
    a.download = "打包文件.zip";
    a.click();

    // 释放资源
    URL.revokeObjectURL(url);
  });
});

功能说明

文件选择

  • 使用 <input type="file" multiple /> 元素允许用户选择多个文件。
  • fileInput.files 属性返回用户选中的文件列表。

ZIP 文件创建

  • 使用 JSZip.file() 方法将文件添加到 ZIP 包中。
  • 通过 generateAsync() 方法生成最终的 ZIP 文件，并指定类型为 blob 格式。

下载过程

  • 创建一个 <a> 元素用于触发下载操作。
  • 使用 URL.createObjectURL() 将 Blob 对象转换为临时 URL。
  • 设置 download 属性以指定文件名，点击按钮即可触发下载。

扩展功能

1. 支持嵌套文件夹

如果需要将文件组织到特定的文件夹结构中，可以使用以下方法：

const folder = zip.folder("目标文件夹名称");
folder.file("文件名", fileData);

2. 显示打包进度

在生成 ZIP 文件的过程中，可以通过 onUpdate 回调显示实时进度：

zip.generateAsync({ type: "blob" }, (metadata) => {
  console.log(`压缩进度: ${metadata.percent.toFixed(2)}%`);
});

3. 支持多种文件类型

JSZip 支持包括图片、音频、视频等多种文件类型。只需将文件内容转换为 ArrayBuffer 或 Blob 格式即可添加到 ZIP 包中。

加载中...