【sduoj】前端JSZip库的使用

2021SC@SDUSC

JSZIP

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

安装

在sduoj项目中,可通过npmyarn进行安装

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函数将会返回该文件contentPromise对象,该函数可以传入的参数有:

  • 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的官方文档,其介绍得还是比较清楚的。

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小栗帽今天吃什么

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值