在html5开发中，借助File API与JSZip这类前端库，可以直接在浏览器里完成zip压缩包的解压，不需要把文件传到后台处理。下面先了解基本用法。
一、准备工作
在页面中引入JSZip库，可以通过CDN方式加载。使用时主要依赖<input type="file">让用户选择本地压缩包。
二、获取用户选择的压缩包
通过input的change事件拿到File对象，再用JSZip加载该文件。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>前端解压示例</title>
<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" accept=".zip">
<div id="result"></div>
<script>
// 监听文件选择
document.getElementById('fileInput').addEventListener('change', function(e) {
var file = e.target.files[0]; // 获取用户选择的zip文件
if (!file) return;
var zip = new JSZip();
// 读取并解析压缩包
zip.loadAsync(file).then(function(zipContent) {
var resultDiv = document.getElementById('result');
resultDiv.innerHTML = '';
// 遍历压缩包内所有文件
zipContent.forEach(function(relativePath, zipEntry) {
if (!zipEntry.dir) {
// 以文本形式读取文件内容
zipEntry.async('string').then(function(data) {
var p = document.createElement('p');
p.textContent = relativePath + ' : ' + data.substring(0, 50);
resultDiv.appendChild(p);
});
}
});
}).catch(function(err) {
alert('解压失败: ' + err.message);
});
});
</script>
</body>
</html>
三、处理不同类型的文件
JSZip的async方法支持多种类型，如string、blob、arraybuffer、base64等。若是图片可用blob还原。
1. 提取图片并展示
// 假设zipEntry是压缩包中的图片文件
zipEntry.async('blob').then(function(blob) {
var img = document.createElement('img');
img.src = URL.createObjectURL(blob); // 生成临时地址
document.body.appendChild(img);
});
四、注意事项
- 大文件解压会占用较多内存，建议在前端限制文件大小。
- zip.loadAsync支持Uint8Array，也可用于解压网络获取的压缩数据。
- 若压缩包有密码，原生JSZip不支持，需要借助其他扩展库。
五、小结
利用html5的File API与JSZip，前端解压zip压缩包非常直观。核心步骤是获取File、调用loadAsync解析、遍历zipEntry并提取内容。掌握这些就能在项目中快速集成浏览器端解压能力。