【sduoj】前端JSZip库的使用

2021SC@SDUSC

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