...
大前端

前端JS使用Zip打包下载

实现 ZIP 打包并提供下载功能,可以使用前端 JavaScript 实现,结合 JSZip 库完成文件的压缩和打包。以下是实现步骤:


步骤 1:引入 JSZip 库

通过 npm 安装或直接使用 CDN 引入 JSZip:

安装 JSZip:

npm install jszip

或通过 CDN 引入:

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

步骤 2:实现 ZIP 打包和下载

以下是核心代码,用于将多个文件打包成 ZIP 并提供下载:

<input type="file" id="fileInput" multiple />
<button id="downloadZip">下载 ZIP</button>
<script src="https://cdn.jsdelivr.net/npm/jszip"></script>
<script>
  const fileInput = document.getElementById("fileInput");
  const downloadZipButton = document.getElementById("downloadZip");

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

    if (!files.length) {
      alert("请选择要打包的文件!");
      return;
    }

    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 = "files.zip";
      a.click();
      URL.revokeObjectURL(url); // 释放 URL
    });
  });
</script>

功能解释

  1. 文件选择:

    • 使用 <input type="file" multiple /> 元素允许用户选择多个文件。
    • fileInput.files 提供了用户选择的文件列表。
  2. JSZip 创建 ZIP 文件:

    • zip.file(name, data) 方法将文件添加到 ZIP 包中。
    • generateAsync({ type: "blob" }) 生成 ZIP 文件,并返回一个 Blob 对象。
  3. 下载 ZIP 文件:

    • 使用 URL.createObjectURLBlob 转化为临时 URL。
    • 创建一个 <a> 元素,设置其 href 属性为生成的 URL,并触发下载。

步骤 3:扩展功能(可选)

a. 支持嵌套文件夹

如果需要支持文件夹结构,可以使用 zip.folder(folderName) 创建文件夹,再将文件添加到该文件夹中。

const folder = zip.folder("myFolder");
folder.file("example.txt", "Hello, World!");

b. 显示打包进度

可以在 generateAsynconUpdate 回调中显示打包进度。

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

c. 支持图片、音频、视频等文件

JSZip 支持多种文件类型,可以直接将文件内容作为 BlobArrayBuffer 添加到 ZIP 中。

HID 报告描述详解 奇特的一个需求,在指定时间内随机间隔跑完指定的步数,使用js实现方法
biu biu biu
uniapp微信小程序隐藏scroll-view滚动条的两种方法 Android使用Apktool反编译解包Apk文件 一个简单的nodejs多任务线程池的实现类 ffmpeg将m3u8转换成mp4 php curl详解及完整的一个curl类库