JavaScript 如何在线解压 ZIP 文件？-六虎

信任我们对 ZIP 文件都不会陌生，当你要翻开本地的 ZIP 文件时，你就需求先设备支撑解压 ZIP 文件的解压软件。但假定预解压的 ZIP 文件在服务器上，我们应该怎样处理呢？最简略的一种方案便是把文件下载到本地，然后运用支撑 ZIP 格式的解压软件进行解压。那么能不全栈工程师能在线解压 ZIgithub怎样下载文件P 文件呢？答案是可以的，接下来阿宝哥将介绍浏览器解压和服务器解压两种在线解压 ZI服务器是什么P 文件的方案。

在介绍在线解压 ZIP 文件的两种方案前，我github直播渠道永久回家们先来简略了解一下 ZIP 文件格式。

一、ZIP 格式简介

ZIP 文apple件格式是一种数据紧缩和文档贮存的文件格式，原名 Deflate，发明者为菲尔卡茨（Phil Katz），他于 1989 年 1 月发布了该格式的材料。ZIP 一般运用后缀前端和后端的差异名 “.zip”，它的 MIME 格式为 “apgithub是干什么的plication/zip”。现在，ZIP 格式归于几种干流的紧缩格式之一，其竞争者包含RAR 格前端工程师式以及敞开源码的 7z 格式。

ZIP 是一种恰当简略的分别紧缩每个文件的存档格式，分别紧缩文件容许不用读取其他的数据而检索独立的文件。理论上，这种格式容许对不同的文件运用不同全栈是什么意思的算法。但是，在实践上，ZIP 大多数都是在运用卡茨（Katz）的 DEFLATE 算法。

简略介绍完 ZIP 格式，接下来阿宝哥先来介绍根据 JSZip 这个库的浏览器解压方案。

注重「全栈修仙之路」阅览阿宝哥原创的 4 本免费电子书（累计下载application 3万+）及 11 篇 Vue 3 进阶系列教程。

二、前端开发需求掌握什么技术浏览器解压方案

JSZip 是一个用于创立、读取和批改 .zip 文件的 JavaScript 库，该库支撑大多数github直播渠道永久回家浏appear览器，具体的兼容全栈开发是干什么的性如下图所示：

其实有了 JSZip 这个库的帮忙，要完毕浏览器端在线解压 ZIP 文件的功用并不难。由于官方现已为我们供应了 解github直播渠道永久回家压本地文件、解压长途文件和生成 ZIP 文件 的无缺示例。好的，废话不多说，下面我们来一步步github中文官网网页完毕在线解压 ZIP 文件的功用。

2.1 定义东西类

浏览器端在线服务器租赁解压 ZIP 文件的功用，可以拆分为 下载 ZIP 文件、服务器晋级中是什么意思解析 ZIP 文件和展现 ZIP 文件 3appetite 个小功用。考虑到功用复用性，阿宝哥把下载 ZIP 文件和解析 ZIP 文件的逻辑封装在 ExeJSZip 类中：

class ExeJSZip {
// 用于获取url地址对应GitHub的文件内容
getBinaryContapplicationent(url, progressFn = () => {}) {
return new Promise((resolve, reject) => {
if (typeof url !== "string" || !/https?:/.test(url))
reject(new Error("url 参数不合法"));
JSZigithub永久回家地址pUtils.getBinaryContent全栈工程师需肄业什么(url, { // JSZi全栈开发什么意思pUtils来自于jszip-utils这个库
progress: prog全栈工程师需肄业什么ressFn,
callback: (err, data) => {
if (err) {
reject(err);
} else {
resolvappstoree(data);
}
},
});
});
}
// 遍历Zi服务器晋级中是什么意思p文件
async iterateZipFile(data, iterationFn) {
if (typeof iterationFn !== "function") {
throw new Error("iteragithub中文官网网页tionFn 不是函数类型");
}
let zip;
try {
zip = await JapplicationSZip.loadAsync(data); // JSZip来自于jszip这个库
zip.forEach(iterationFn);
return zip;
} catch (error) {
throw new e全栈开发者rror(approve);
}
}
}

2.全栈是什么意思2 在github中文社区线解压 ZIP 文件

运appear用 ExeJSZip 类的实例，我们就可以很简略完毕在线解压 ZIP 文件github中文社区的功用：

html 代码

<p>
<label>请输入ZIP文件的线上地址：</labelapproach>
<igithub打不开nput type="text" id="z全栈开发者ipUrl" />
</p>
<button id="unzipBtn" onclick="unzi全栈开发者pOnline()">在线解压</button>
<p id="status"></p>
<ul iappearanced="fileList"></ul>

JS 代码

const zipUrlEle = document.querySelector("#zipUrl");
const stappearanceatusEle = doappearancecument.querySelector("#status");全栈是什么意思
const fileList = document.querySelector("#fileLGitHubist");
const exeJSZiappointmentp = new ExeJSZip();
// 施行在线解压操作
async function unzipOnlgithub打不开ine() {
fileList.innerHTML = "";
statusEle.innerTex前端开发t = "开始下载文件...";
const data = await exeJSZAPPip.getBingithub直播渠道永久回家aryCon全栈工程师薪水tent(
zipUrlEle.value,
handleProgress
);
le全栈t items = "";
await exeJSZip.iterateZipFile(data, (relativePath, zipEntry) => {
items前端开发需肄业什么 += `<li class=${zipEntry.dir ? "caret" : "indent"}>
${zipEntry.name}</li>`;
});
statusEle.innerText = "ZIP文件解压成功";
fileList.innerHT全栈工程师ML = items;
}
// 处理下载开展
function handleProgress(progressData) {
const全栈开发者 { pgithub怎样下载文件ercent, loaded, total } = progressData;
if (loaded === total) {
statusEle.innerTegithub永久回家地址xt = "文件已下前端开发是干什么的载，尽力解压中";
}
}

好了，在浏览器端怎样服务器内存和一般内存有什么差异通过 JSZip 这个库来完毕在线解压 ZIP 文件的功用现已介绍完了，我们来看一下以上示例的工作作用：

现在我们现已可以在线解压 ZIP全栈工程师需肄业什么文件了，这时有服务器怎样建立的小伙伴可能会问，能否预览解压后的文件呢？答案是可以的，由于 JSZip 这个库为我们供应了 file API，通过这个 API 我们就可以读取指定文件中的内容。比如这样运用 zip.file("amount.txt").async("arrayappearancebuffer") ，之后我们就可以施行对应的操作来完毕文件预览的功用。

需求留心的是，根据 JSZip 的方案并不是完美的，它存在一些束缚。比如它不支撑解压加密的前端开发需求掌握什么技术 ZIP 文件，当解压较大的文件时，在 IE 10 以下的浏览器可能会出现闪退问题。此外，它还有一些其它的束缚，这里阿宝哥就不具体说清楚。感兴趣的小伙伴，可以阅览 Limitations of JSZip 文章中的相关内全栈解耦容。

已然浏览器解压方案存在一些害处，特别是在线解压大文件的景象，要处理全栈开发者该问题，我们可以考虑运用服务器解压方案。

三、服务器解压方案

服务器解压方案便是容许用户通过文件 ID 或文件名进行在线解压，接下来阿宝哥将根据 koa 和 node-stream全栈-zip 这两个库来GitHub介绍怎样完毕服务器在线解压 ZIP 文件的功用。假定你对 koa 还不了解的话，主张你先大致阅览一下 koa 的官方文档。

const path = require("path");
const Koa = require("koa");
const cors = require("@ko全栈工程师薪水a/cors");
const Rgithub永久回家地址ogithub直播渠道永久回家uter = require("@koa/router");
const StreamZip = require("no服务器和电脑主机的差异de-stream-zip");
const app = new Koa();
const router = new Router();
const ZIP_HOME = path.join(__dirname, "zip"); // ZIP文件的根目录
const U前端练习组织nzipCaches = new Map(); // 保存已解压的文件信息
router.get("/全栈", async (ctx) => {
ctx.body = "服务端在线解压ZIP文件示例（阿宝GitHub哥）";
});
// 注册中github敞开私库间件
app.use(cors());
app.use(router.routeappstores()).use(router.allowedMethods());
app.l服务器系统isten(3000, () => {
console.log("app全栈解耦 starting at port 3000");
});

在以上代码中，我们运用了 @koa/cor前端开发需求掌握什么技术s 和 @koa/router 两个中间件并创立了一个简略的 Koa 应用程序。根据上github中文官网网页述的代码，我们来注册一个用github下载于处理在线解压指定文件名的路由。

3.1 根据文件名解压指定 ZIP 文件

app.js

router.get("/unzip/:name", async (ctx) => {
const fi全栈工程师薪水leName = ctx.params.name;
let服务器租赁 filteredEntries;
try {
if (UnzipCaches.has(fileName)) { // 优先从缓存中获取
filteredEntries = UnzipCaches.get(fileName);
} else {
const zip = new StreamZip.async({ file: path.join(ZIP_HOME, fileName) });
const en全栈工程师需肄业什么tries =全栈开发什么意思 await zip.entrie全栈是什么意思s();
filteredEntries = Obj全栈工程师薪水ect.values(entriesapplication).map((entry) => {
return {
name: entry.name,
size: ent服务器系统ry.size,
dir: entry.isDirectory服务器晋级中是什么意思,前端练习组织
};
});
await zip.close();
UnzipCaches.set(fileName, filteredEntrie全栈是什么意思s);
}
ctx.body = {
status: "success",
entries: filteredEntries,
};
} catch (error) {
ctx.body = {
status: "error",
msg: `在线解压${fileName}文件失利`,
};
}
});

在以上代码前端学什么中，我们通过 ZIP_HOME 和 fileName 取得文件的毕竟途径，然后运用 StreamZip 方针来施行解压操作。为了防止重复施行解压操作，阿宝哥定义了一个 UnzipCaches 缓存方针，用来保存已解压的文件信息。定义好上述路由，下面我们来验证一下对应的功用。

3.2 在线解压 ZIP 文件

html 代码

<p>
<label&appstoregt;请输入ZIP文件名：</label>
<input type="text" id="fileName" value="kl_161828427993677" />
</p>
<button id="unzipBtn" onclick="unzipOnline前端学什么()">在线解压</button>
<p id="status"></p>
<ul id="fileList"></ul>

JS 代码

const fileList = document.querySelector("#fileList");
const fileNameEle = document.querySelector("#fileName");
const reques前端和后端哪个薪酬高t = axios.creaappetitete({
baseURL: "http://l前端和后端的差异ocalhost:3000/",
timeout: 10000,
});
async function unzipOnline() {
con服务器租赁st fileName = fileNameEle.value;
if(!fileName) return;
const response = await request.get(`unzip/${fileN前端开发ame}`);
if (response.data && response.data.status === "success") {
const entries = response.data.entries;
let items = "";
entri服务器内存和一般内存有什么差异es.forEach((zipEntry) => {
items += `<li class=$appearance{zipEntry.dir ? "caret" : "i服务器怎样建立ndent"appstore}>${
zigithub打不开pEntry.name
}</li>`;
});
fileList.innerHTML = items;
}
}

以上示例成功工作服务器晋级中是什么意思后的作用如下图所示：

现在我们现已完毕根据文件名解压指定 ZIP 文件，那么我们可以预览紧缩文件中指定途径的文件么？答案也是可以的，运用 zip 方针供应的 entryData(entry: string | ZipEntry): Promise&lt全栈工程师薪水;Buffe前端和后端哪个薪酬高r> 办法就可以读取指定途径下github是干什么的文件的内容。

3.3 预览 ZIP 文件中指定途径的文件

app.js

router.appearget("/unzip/:name/entry", async (ctx) => {
const fileNagithub中文官网网页me = ctx.params.naappointmentme; // ZIP紧缩文件名
const entryPath = capproachtx.query.path; // 文件的途径
try服务器租赁多少钱一年 {
const zip = new StreamZip.async({ file: path.join(ZIP_HOME, fileName) });
const entryData = await zip.entryappointmentData(entryPath);
await zip.close();
ctx.body = {
status: "success",
entryData: entryData,appear
};
} catch (error) {
ctx.body = {
status: "eapproverror",
msg: `读取${fileName}中${entryPath}文件失利`,
};
}
});

在以上代码中，我们通过 zip.entryData 办法来读取指定途径的文件内容，它回来的是一个 Buffer 方针。当前端接收到该数据时，还需求把接收到的 Buffer 方针转全栈是什么意思换为 Arr前端和后端哪个薪酬高ayBuffer 方针，对应的处理方式如下所示：

function toArrayBuffer(bu前端f) {
let ab = new ArrayBuffer(buf.length);
let view = new Uint8Array(ab);
for (let i = 0; i < buf.length; ++i) {
view[服务器和电脑主机的差异i] = buf[i];
}
return ab;
}

定义完全栈工程师 toArrayBuffer 函数之后，我们就可以通过调用 app.js 定义的 API 来完毕预览功用，具体的代码如下所示：

async function previewZipFile(patGitHubh) {
coappointmentnst fileName = fileNa前端和后端的差异meEle.value; // 获取文件名
const response = await request.get(
`unzip/${fileName}/entry?path=${path}`
);
if (response.data && respon全栈开发是干什么的se.data.sgithub打不开tatus === "succeappstoress") {
const { entryData } = response.data;
const entryBuffer = toArra前端开发需肄业什么yBuffer(entryData.data);
const blob = new Blob([entryBuffer]);
// 运用URL.createObjectURL或blob.text()读取文件信息
}
}

由于无缺的示例代码内容比较多，阿宝哥就不放具体的代码了。感兴趣的小伙伴appointment，可以访问以下地址浏览示例代码。

gist.github.capplicationom/semlinker/3…

留心：以上代码仅供参看，请根据实践业务进行调整。

四、总结

本文阿宝哥介绍了在线解压 ZIP 文件的两种方案，在实践项目中，主张运用服务器解压的方案。这样不仅可以appreciate处理浏览器的兼容性前端和后端的差异问题，并且也可以处理大文件在线解压的问题，一起也便利后期扩展支撑其它前端面试题的紧缩格式。

注重「全栈修仙之路」阅览阿宝哥原创的 4 本免费电子书（累计下载 3万+）及 11 篇 Vue 3 进阶系列教程。想一起学习 TS/Vue 3.0 的小伙伴可以添加阿宝哥微信 —— semlinker。

五、参看资源

维基百科 ZIP 格式
Limitations of JSZip

JavaScript 如何在线解压 ZIP 文件？

一、ZIP 格式简介

二、前端开发需求掌握什么技术浏览器解压方案

2.1 定义东西类

2.全栈是什么意思2 在github中文社区线解压 ZIP 文件

html 代码

JS 代码

三、服务器解压方案

3.1 根据文件名解压指定 ZIP 文件

app.js

3.2 在线解压 ZIP 文件

html 代码

JS 代码

3.3 预览 ZIP 文件中指定途径的文件

app.js

四、总结

五、参看资源

相关文章

使用Vitest + React Testing Library进行单元测试

简单聊聊内存逃逸 ｜ 剑指offer – golang

求助 iOS 分发的最佳实践

使用go-oauth2实现一个极简的Oauth2授权服务

作者信息

简单聊聊内存逃逸｜剑指offer – golang