在前端开发中，处理文件压缩解压是很常见的需求，比如上传多个文件时先压缩再传输，或者下载压缩包后在前端直接解压读取内容。JavaScript没有内置的压缩解压API，不过可以通过jszip这类成熟的第三方库实现相关功能，下面我们就来详细介绍具体实现方式。
核心依赖库介绍
jszip是目前前端领域使用最广泛的JavaScript压缩解压库，它支持在浏览器和Node.js环境中运行，能够创建、读取、编辑zip格式的压缩包，支持添加文件、读取文件内容、设置压缩级别等操作，兼容性较好，使用起来也比较简单。
浏览器环境实现文件压缩
在浏览器中实现文件压缩，通常需要结合input标签获取用户选择的文件，然后通过jszip将多个文件打包成zip，最后生成下载链接供用户下载。
实现步骤
- 引入jszip库
- 监听文件选择事件，获取用户选中的文件列表
- 创建jszip实例，将文件逐个添加到实例中
- 调用generateAsync方法生成zip的Blob对象
- 创建下载链接触发文件下载
完整代码示例
// 引入jszip，若通过script标签引入则无需此步
// import JSZip from 'jszip';
// 获取文件选择输入框和压缩按钮
const fileInput = document.getElementById('fileInput');
const compressBtn = document.getElementById('compressBtn');
compressBtn.addEventListener('click', async () => {
const files = fileInput.files;
if (files.length === 0) {
alert('请先选择需要压缩的文件');
return;
}
// 创建jszip实例
const zip = new JSZip();
// 遍历选中的文件，添加到zip中
for (let i = 0; i < files.length; i++) {
const file = files[i];
// 以文件名作为zip内的路径，添加文件内容
zip.file(file.name, file);
}
try {
// 生成zip的Blob对象，设置压缩级别为最高
const zipBlob = await zip.generateAsync({
type: 'blob',
compression: 'DEFLATE',
compressionOptions: { level: 9 }
});
// 创建下载链接
const downloadUrl = URL.createObjectURL(zipBlob);
const a = document.createElement('a');
a.href = downloadUrl;
a.download = 'compressed_files.zip';
// 触发下载
document.body.appendChild(a);
a.click();
// 清理资源
document.body.removeChild(a);
URL.revokeObjectURL(downloadUrl);
alert('文件压缩完成，已开始下载');
} catch (err) {
console.error('压缩失败:', err);
alert('文件压缩失败，请重试');
}
});
浏览器环境实现文件解压
解压zip文件同样需要先获取用户上传的zip文件，然后使用jszip的loadAsync方法读取zip内容，再逐个提取内部的文件。
实现步骤
- 获取用户上传的zip文件
- 使用jszip的loadAsync方法加载zip文件
- 遍历zip内部的文件，读取每个文件的内容
- 根据文件类型处理内容，比如文本文件直接展示，图片文件生成预览
完整代码示例
// 获取解压相关的元素
const zipInput = document.getElementById('zipInput');
const unzipResult = document.getElementById('unzipResult');
zipInput.addEventListener('change', async (e) => {
const file = e.target.files[0];
if (!file || !file.name.endsWith('.zip')) {
alert('请选择zip格式的压缩文件');
return;
}
try {
const zip = new JSZip();
// 加载zip文件
const zipData = await zip.loadAsync(file);
unzipResult.innerHTML = '<h3>解压结果：</h3>';
// 遍历zip内的所有文件
zipData.forEach((relativePath, zipEntry) => {
if (!zipEntry.dir) {
// 非目录文件，读取内容
zipEntry.async('blob').then((content) => {
const fileItem = document.createElement('div');
fileItem.style.margin = '10px 0';
fileItem.innerHTML = `<strong>文件名：${relativePath}</strong><br/>`;
// 判断文件类型，处理不同格式的内容
if (content.type.startsWith('image/')) {
// 图片文件生成预览
const imgUrl = URL.createObjectURL(content);
const img = document.createElement('img');
img.src = imgUrl;
img.style.maxWidth = '200px';
img.onload = () => URL.revokeObjectURL(imgUrl);
fileItem.appendChild(img);
} else if (content.type.startsWith('text/')) {
// 文本文件读取内容展示
content.text().then((text) => {
const pre = document.createElement('pre');
pre.style.background = '#f5f5f5';
pre.style.padding = '10px';
pre.textContent = text;
fileItem.appendChild(pre);
});
} else {
fileItem.innerHTML += '不支持预览该类型文件，可下载后查看';
}
unzipResult.appendChild(fileItem);
});
}
});
} catch (err) {
console.error('解压失败:', err);
alert('zip文件解压失败，请检查文件是否损坏');
}
});
Node.js环境实现压缩解压
在Node.js环境中使用jszip处理文件，需要结合fs模块读取本地文件，实现本地文件的压缩和解压操作。
压缩本地文件示例
const JSZip = require('jszip');
const fs = require('fs');
const path = require('path');
// 要压缩的文件夹路径
const targetDir = './test_files';
// 生成的zip文件路径
const outputPath = './output.zip';
const zip = new JSZip();
// 读取文件夹内的所有文件
const files = fs.readdirSync(targetDir);
files.forEach((filename) => {
const filePath = path.join(targetDir, filename);
// 判断是文件还是目录，这里仅处理文件
if (fs.statSync(filePath).isFile()) {
const fileContent = fs.readFileSync(filePath);
// 添加到zip中
zip.file(filename, fileContent);
}
});
// 生成zip文件
zip.generateAsync({ type: 'nodebuffer' }).then((content) => {
fs.writeFileSync(outputPath, content);
console.log('文件压缩完成，输出路径：', outputPath);
}).catch((err) => {
console.error('压缩失败:', err);
});
解压本地zip文件示例
const JSZip = require('jszip');
const fs = require('fs');
const path = require('path');
// 要解压的zip文件路径
const zipPath = './output.zip';
// 解压后的输出目录
const extractDir = './extracted_files';
// 创建输出目录
if (!fs.existsSync(extractDir)) {
fs.mkdirSync(extractDir, { recursive: true });
}
// 读取zip文件
const zipData = fs.readFileSync(zipPath);
const zip = new JSZip();
zip.loadAsync(zipData).then((zipData) => {
const promises = [];
// 遍历zip内的所有文件
zipData.forEach((relativePath, zipEntry) => {
if (!zipEntry.dir) {
// 读取文件内容，写入本地
const promise = zipEntry.async('nodebuffer').then((content) => {
const outputFilePath = path.join(extractDir, relativePath);
// 创建文件所在的目录
const outputFileDir = path.dirname(outputFilePath);
if (!fs.existsSync(outputFileDir)) {
fs.mkdirSync(outputFileDir, { recursive: true });
}
fs.writeFileSync(outputFilePath, content);
console.log('解压文件：', relativePath);
});
promises.push(promise);
}
});
return Promise.all(promises);
}).then(() => {
console.log('所有文件解压完成，输出目录：', extractDir);
}).catch((err) => {
console.error('解压失败:', err);
});
注意事项
- 压缩大文件时可能会占用较多内存，建议分片处理或者提示用户不要压缩过大的文件
- 解压未知来源的zip文件时要注意安全，避免解压恶意文件导致安全问题
- 如果需要处理其他压缩格式比如rar，jszip不支持，需要寻找其他对应的库
- 在浏览器环境中，生成的Blob对象使用完后要及时调用URL.revokeObjectURL释放内存
JavaScript文件压缩文件解压jszip修改时间：2026-06-29 08:57:46