文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

使用JavaScript怎么在线解压 ZIP 文件

2023-06-15 01:25

关注

本篇文章给大家分享的是有关使用JavaScript怎么在线解压 ZIP 文件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

一、ZIP 格式简介

ZIP 文件格式是一种数据压缩和文档储存的文件格式,原名 Deflate,发明者为菲尔·卡茨(Phil Katz),他于 1989 年 1 月公布了该格式的资料。ZIP 通常使用后缀名 “.zip”,它的 MIME 格式为 “application/zip”。目前,ZIP 格式属于几种主流的压缩格式之一,其竞争者包括RAR 格式以及开放源码的 7z 格式。

ZIP 是一种相当简单的分别压缩每个文件的存档格式,分别压缩文件允许不必读取另外的数据而检索独立的文件。理论上,这种格式允许对不同的文件使用不同的算法。然而,在实际上,ZIP 大多数都是在使用卡茨(Katz)的 DEFLATE 算法。

简单介绍完 ZIP 格式,接下来阿宝哥先来介绍基于 JSZip 这个库的浏览器解压方案。

二、浏览器解压方案

JSZip 是一个用于创建、读取和编辑 .zip 文件的 JavaScript 库,该库支持大多数浏览器,具体的兼容性如下图所示:

使用JavaScript怎么在线解压 ZIP 文件

其实有了 JSZip 这个库的帮助,要实现浏览器端在线解压 ZIP 文件的功能并不难。因为官方已经为我们提供了 解压本地文件、解压远程文件和生成 ZIP 文件 的完整示例。好的,废话不多说,下面我们来一步步实现在线解压 ZIP 文件的功能。

2.1 定义工具类

浏览器端在线解压 ZIP 文件的功能,可以拆分为 下载 ZIP 文件、解析 ZIP 文件和展示 ZIP 文件 3 个小功能。考虑到功能复用性,阿宝哥把下载 ZIP 文件和解析 ZIP 文件的逻辑封装在 ExeJSZip 类中:

class ExeJSZip {  // 用于获取url地址对应的文件内容  getBinaryContent(url, progressFn = () => {}) {    return new Promise((resolve, reject) => {      if (typeof url !== "string" || !/https?:/.test(url))        reject(new Error("url 参数不合法"));      JSZipUtils.getBinaryContent(url, { // JSZipUtils来自于jszip-utils这个库        progress: progressFn,        callback: (err, data) => {          if (err) {            reject(err);          } else {            resolve(data);          }        },      });    });  }    // 遍历Zip文件  async iterateZipFile(data, iterationFn) {    if (typeof iterationFn !== "function") {      throw new Error("iterationFn 不是函数类型");    }    let zip;    try {      zip = await JSZip.loadAsync(data); // JSZip来自于jszip这个库      zip.forEach(iterationFn);      return zip;    } catch (error) {      throw new error();    }  }}

2.2 在线解压 ZIP 文件

利用 ExeJSZip 类的实例,我们就可以很容易实现在线解压 ZIP 文件的功能:

html 代码

<p>  <label>请输入ZIP文件的线上地址:</label>  <input type="text" id="zipUrl" /></p><button id="unzipBtn" onclick="unzipOnline()">在线解压</button><p id="status"></p><ul id="fileList"></ul>

JS 代码

const zipUrlEle = document.querySelector("#zipUrl");const statusEle = document.querySelector("#status");const fileList = document.querySelector("#fileList");const exeJSZip = new ExeJSZip();// 执行在线解压操作async function unzipOnline() {  fileList.innerHTML = "";  statusEle.innerText = "开始下载文件...";  const data = await exeJSZip.getBinaryContent(    zipUrlEle.value,    handleProgress  );  let items = "";  await exeJSZip.iterateZipFile(data, (relativePath, zipEntry) => {    items += `<li class=${zipEntry.dir ? "caret" : "indent"}>      ${zipEntry.name}</li>`;  });  statusEle.innerText = "ZIP文件解压成功";  fileList.innerHTML = items;}// 处理下载进度function handleProgress(progressData) {  const { percent, loaded, total } = progressData;  if (loaded === total) {    statusEle.innerText = "文件已下载,努力解压中";  }}

好了,在浏览器端如何通过 JSZip 这个库来实现在线解压 ZIP 文件的功能已经介绍完了,我们来看一下以上示例的运行结果

使用JavaScript怎么在线解压 ZIP 文件

现在我们已经可以在线解压 ZIP 文件了,这时有的小伙伴可能会问,能否预览解压后的文件呢?答案是可以的,因为 JSZip 这个库为我们提供了 file API,通过这个 API 我们就可以读取指定文件中的内容。比如这样使用 zip.file("amount.txt").async("arraybuffer") ,之后我们就可以执行对应的操作来实现文件预览的功能。

需要注意的是,基于 JSZip 的方案并不是完美的,它存在一些限制。比如它不支持解压加密的 ZIP 文件,当解压较大的文件时,在 IE 10 以下的浏览器可能会出现闪退问题。此外,它还有一些其它的限制,这里阿宝哥就不详细说明了。感兴趣的小伙伴,可以阅读 Limitations of JSZip 文章中的相关内容。

既然浏览器解压方案存在一些弊端,特别是在线解压大文件的情形,要解决该问题,我们可以考虑使用服务器解压方案。

三、服务器解压方案

服务器解压方案就是允许用户通过文件 ID 或文件名进行在线解压,接下来阿宝哥将基于 koa 和 node-stream-zip 这两个库来介绍如何实现服务器在线解压 ZIP 文件的功能。如果你对 koa 还不了解的话,建议你先大致阅读一下 koa 的官方文档。

const path = require("path");const Koa = require("koa");const cors = require("@koa/cors");const Router = require("@koa/router");const StreamZip = require("node-stream-zip");const app = new Koa();const router = new Router();const ZIP_HOME = path.join(__dirname, "zip"); // ZIP文件的根目录const UnzipCaches = new Map(); // 保存已解压的文件信息router.get("/", async (ctx) => {  ctx.body = "服务端在线解压ZIP文件示例(阿宝哥)";});// 注册中间件app.use(cors());app.use(router.routes()).use(router.allowedMethods());app.listen(3000, () => {  console.log("app starting at port 3000");});

在以上代码中,我们使用了 @koa/cors 和 @koa/router 两个中间件并创建了一个简单的 Koa 应用程序。基于上述的代码,我们来注册一个用于处理在线解压指定文件名的路由。

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

app.js

router.get("/unzip/:name", async (ctx) => {  const fileName = 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 entries = await zip.entries();      filteredEntries = Object.values(entries).map((entry) => {        return {          name: entry.name,          size: entry.size,          dir: entry.isDirectory,        };      });      await zip.close();      UnzipCaches.set(fileName, filteredEntries);    }    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>请输入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 request = axios.create({  baseURL: "http://localhost:3000/",  timeout: 10000,});async function unzipOnline() {  const fileName = fileNameEle.value;  if(!fileName) return;  const response = await request.get(`unzip/${fileName}`);  if (response.data && response.data.status === "success") {    const entries = response.data.entries;    let items = "";    entries.forEach((zipEntry) => {      items += `<li class=${zipEntry.dir ? "caret" : "indent"}>${        zipEntry.name      }</li>`;    });    fileList.innerHTML = items;  }}

以上示例成功运行后的结果如下图所示:

使用JavaScript怎么在线解压 ZIP 文件

现在我们已经实现根据文件名解压指定 ZIP 文件,那么我们可以预览压缩文件中指定路径的文件么?答案也是可以的,利用 zip 对象提供的 entryData(entry: string | ZipEntry): Promise<Buffer> 方法就可以读取指定路径下文件的内容。

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

app.js

router.get("/unzip/:name/entry", async (ctx) => {  const fileName = ctx.params.name; // ZIP压缩文件名  const entryPath = ctx.query.path; // 文件的路径  try {    const zip = new StreamZip.async({ file: path.join(ZIP_HOME, fileName) });    const entryData = await zip.entryData(entryPath);    await zip.close();    ctx.body = {      status: "success",      entryData: entryData,    };  } catch (error) {    ctx.body = {      status: "error",      msg: `读取${fileName}中${entryPath}文件失败`,    };  }});

在以上代码中,我们通过 zip.entryData 方法来读取指定路径的文件内容,它返回的是一个 Buffer 对象。当前端接收到该数据时,还需要把接收到的 Buffer 对象转换为 ArrayBuffer 对象,对应的处理方式如下所示:

function toArrayBuffer(buf) {  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(path) {  const fileName = fileNameEle.value; // 获取文件名  const response = await request.get(    `unzip/${fileName}/entry?path=${path}`  );  if (response.data && response.data.status === "success") {    const { entryData } = response.data;    const entryBuffer = toArrayBuffer(entryData.data);    const blob = new Blob([entryBuffer]);    // 使用URL.createObjectURL或blob.text()读取文件信息  }}

JavaScript有什么特点

1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3、js属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4、js语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5、基于对象的脚本语言,js不仅可以创建对象,也能使用现有的对象。

以上就是使用JavaScript怎么在线解压 ZIP 文件,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯