JSZIP

JSZip是一个用于创建、读取和编辑.zip文件的javascript库，具有好用而简单的 API。

安装

在sduoj项目中，可通过npm或yarn进行安装

npm install jszip

或

yarn add jszip

使用

JSZip为开发者提供了诸多API可用于处理各类业务。具体API可参考： JSZip API
下面将展示部分示例：

引入

import JSZip from 'jszip';

在script开头引入JSZip。

实例化

在引入JSZip后，我们需要实例化JSZip对象。直接使用new关键字即可。

let jszip = new JSZip();

这样我们就得到了一个JSZIP的实例化对象。接下来我们就可以通过这个对象来进行一些操作了。

读取zip文件

通过JSZip，我们可以实现对zip文件的读取和解析。要实现这个功能，我们用到的API是JSZip.loadAsync(data [, options])。从该API的命名也可以看出，这是一个异步函数。其具体使用方法如下：

<template><div><input type="file" id="file" /><button @click="analyze">解析</button></div>
</template><script>
import JSZip from "jszip";
export default {methods: {analyze() {let file = document.getElementById("file").files[0];let jszip = new JSZip();jszip.loadAsync(file).then((zip) => {console.log(zip);})}}
}
</script>

在上面的代码中，我们先创建了一个file类型的input组件，用来上传zip文件。点击按钮触发analyze函数，先通过document.getElementById("file").files[0]获取到input组件中上传的文件，再调用JSZip的loadAsync函数。由于loadAsync是一个异步函数，因此我们在该函数的then方法中传入其回调函数。最终打印出来的就是读取的zip文件的内容了。

我们可以看到，在控制台中打印了从上传的zip文件中读取的数据，其中最为重要的就是files字段。其包含了该压缩包中所承载的所有文件信息。

读取压缩包中的文件

在上一步中，我们使用loadAsync成功读取了压缩文件的信息，接下来，我们可能会遇到某些业务需要我们读取压缩包内部某个文件的信息。这个时候要怎么办呢？JSZip还为我们提供了另一个API——JSZip.file。下面我将来演示一下该API的使用方法。
我们依旧以上面的代码为模板，在loadAsync的回调函数中做些修改，将压缩包中的scores.txt的内容都打印出来。修改后的代码如下：

<template><div><input type="file" id="file" /><button @click="analyze">解析</button></div>
</template><script>
import JSZip from "jszip";
export default {methods: {analyze() {let file = document.getElementById("file").files[0];let jszip = new JSZip();jszip.loadAsync(file).then((zip) => {if (Object.keys(zip.files).indexOf("scores.txt") !== -1) {jszip.file("scores.txt").async("string").then((content) => {console.log(content);});}})}}
}
</script>

在回调函数中，我们通过Object.keys将JSZip的files转换为由其键值组成的数组（其键值表示的是文件名），在判断该文件存在后，我们调用JSZip.file接口，传入的值为该文件的文件名。然后调用 async(“string”) 函数，async函数将会返回该文件content的Promise对象，该函数可以传入的参数有：

string：返回该文件内容的Promise对象
blob：返回该文件内容的二进制（BLOB）的Promise对象
base64：返回该文件经过base64编码后的内容的Promise对象
arraybuffer：返回该文件内容的二进制（ArrayBuffer）的Promise对象
uint8array：返回该文件内容的8位无符号整型数组的Promise对象（该参数也可写为nodebuffer）

以上参数可以根据需要进行选择。在获取到Promise对象后，我们就可以使用then函数提取出该文件的content了。
当zip文件中存在树状结构时，如：

├── aaa.txt
├── bbb.txt
├── folder
│   └── test.txt
└──scores.txt

在上述的结构中，我们发现存在一个叫做“folder”的文件夹，其中含有一个叫做“test.txt”的文件。如果我们需要读取这个test.txt的时候，又该怎么做呢？很简单，我们只需要使用/来构造相对路径即可，比如：jszip.file("folder/test.txt")。
当然，我们还可以换一种写法，这种写法需要引入一个新的API，这个API专门用来读取文件夹，它叫做folder。
如果使用该API，上面的代码则可以改写成jszip.folder("folder").file("test.txt")。

遍历压缩包内的所有文件（单层）

使用JSZip.forEach接口，可以实现遍历当前层次下的所有文件。比如我要遍历“parent”文件夹下的所有文件，我们可以采用如下写法：

let JSZip = require("jszip");
let jszip = new JSZip();
jszip.loadAsync(document.getElementById("file").files[0]).then((zip) => {jszip.folder("parent").forEach((relativePath, file) => {console.log(relativePath, file); // 打印文件的相对路径以及文件的详细内容})
})

小结

使用上述API基本可以实现SDUOJ项目所需要的对zip文件的操作，其他的API在本文中不再做过多赘述，如有需要可以查看JSZIP的官方文档，其介绍得还是比较清楚的。

【sduoj】前端JSZip库的使用相关推荐

前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)
0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...
聊聊前端日志库在 SaaS 产品中的应用与设计
文 | 元三网易智企资深前端开发工程师一.前言笔者所在的公司业务主要是为企业提供全流程的企业服务和一整套 SaaS 解决方案.对于企业服务 SaaS 产品来说,客户完成购买并不意味着产品价值已经 ...
紧急通知：360 网站卫士前端公共库已停止服务
所有使用了360前端公共库的开发者和站长们,请及时更换你的前端库的链接(主要是前端库和谷歌 fonts),否则网站打开速度会极慢,甚至会在 Chrome 浏览器中崩溃. 360前端公共库曾经提供的服务 ...
如何使用rollup打包前端组件/库
如何使用rollup打包前端组件/库目前主流的前端框架vue和react都采用rollup来打包,为了探索rollup的奥妙,接下来就让我们一步步来探索,并基于rollup搭建一个库打包脚手架,来发 ...
全面、详细的前端组件库
全面.详细的前端组件库前端组件库搭建web app常用的样式/组件等收集列表(移动优先) 0. 前端自动化(Workflow) 前端构建工具 Yeoman – a set of tools for ...
常用公共前端CDN库
静态资源 CDN 公共库是指一些服务商将我们常用的 JavaScript 库存放到网上,方便开发者直接调用,并且还对其提供 CDN 加速,这样一来可以让用户加速访问这些资源,二来还可节约自己服务器的流 ...
html是用cdn资源,网站常用前端公共库CDN服务资源(百度+360)
谷歌最近很不稳定,模板无忧原本使用的google cdn的Jquery库,因为google服务器问题,导致网站打开速度超慢. 严重影响了网站体验,特整理了本篇文章,分享一下国内的各类常用资源cdn公用 ...
国内可用的css,js,图标字体,等常用前端公共库CDN服务
CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过在网络各处放置节 ...
360网站卫士常用前端公共库CDN服务停掉了
今天发现原先程序中调用的类似http://fonts.useso.com/css?family=Open+Sans:400,300,600,700&subset=all直接报502了,访问36 ...
360网站卫士前端公共库已停止服务
最近有的站长发现打开网站一直停在加载fonts.useso.com中,fonts.useso.com本来是360网站卫士CDN加速的字体服务,但是现在已经停止服务了! 但是谷歌的字体服务已经能使用了, ...

【sduoj】前端JSZip库的使用

文章目录

JSZIP

安装

使用

引入

实例化

读取zip文件

读取压缩包中的文件

遍历压缩包内的所有文件（单层）

小结

【sduoj】前端JSZip库的使用相关推荐

最新文章

热门文章