前端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>
功能解释
-
文件选择:
- 使用
<input type="file" multiple />
元素允许用户选择多个文件。 fileInput.files
提供了用户选择的文件列表。
- 使用
-
JSZip 创建 ZIP 文件:
zip.file(name, data)
方法将文件添加到 ZIP 包中。generateAsync({ type: "blob" })
生成 ZIP 文件,并返回一个Blob
对象。
-
下载 ZIP 文件:
- 使用
URL.createObjectURL
将Blob
转化为临时 URL。 - 创建一个
<a>
元素,设置其href
属性为生成的 URL,并触发下载。
- 使用
步骤 3:扩展功能(可选)
a. 支持嵌套文件夹
如果需要支持文件夹结构,可以使用 zip.folder(folderName)
创建文件夹,再将文件添加到该文件夹中。
const folder = zip.folder("myFolder");
folder.file("example.txt", "Hello, World!");
b. 显示打包进度
可以在 generateAsync
的 onUpdate
回调中显示打包进度。
zip.generateAsync({ type: "blob" }, (metadata) => {
console.log(`压缩进度: ${metadata.percent.toFixed(2)}%`);
});
c. 支持图片、音频、视频等文件
JSZip
支持多种文件类型,可以直接将文件内容作为 Blob
或 ArrayBuffer
添加到 ZIP 中。