一篇文章介绍JSZip预览压缩包中的文件

article/2025/10/4 8:36:02

安装依赖

npm i jszip

前提准备

准备好一个压缩包，格式为zip，存放两张png图片。

代码实现

<template><h1>JSZip,预览压缩包中的文件</h1><img v-for="(n,m) in picArr.arr":src="n":style="{width:'200px'}":key="m"><div>需要压缩的包(zip)</div><input type="file"@change="fn">
</template>

<script setup>
import { reactive } from '@vue/reactivity'
import JSZip from 'jszip'

let picArr = reactive({ arr: [] })
const fn = (e) => {// console.log(e.target.files[0]);let zip = new JSZip()// loadAsync() 读取现有的zip，并在当前文件夹级别合并当前JSZip对象中的数据// 如果两个具有相同的名称，则加载的一个将替换另一个zip.loadAsync(e.target.files[0]).then(zipdata => {// console.log(zipdata.files);for (let n in zipdata.files) {// console.log(zipdata.files[n]);
// .file(name) 读取文件在当前目录zipdata// 获得指定文件里面的文件名字.file(zip.files[n].name)// 指定返回结果类型.async('base64').then(res => {// 打印base64// console.log(res);let imgBase64 = 'data:image/jpeg;base64,' + respicArr.arr.push(imgBase64)})}})
}
</script>

<style scoped>
div {margin: 0 auto;
}
</style>

结果显示

代开浏览器页面点击按钮上传压缩包。

结果会在浏览器页面中显示压缩包里的图片内容。

举一反三，如果压缩包里面的内容是文本信息呢，应该怎么显示？

关键部分：async('text') 实现对文本内容的解析。

准备一个文本压缩包如下。

代码修改如下

<template><h1>JSZip,预览压缩包中的文件</h1><img v-for="(n,m) in picArr.arr":src="n":style="{width:'200px'}":key="m"><div>需要压缩的包(zip)</div><input type="file"@change="fn"><h2>{{ zipContent }}</h2>
</template>

<script setup>
import { reactive, ref } from '@vue/reactivity'
import JSZip from 'jszip'

let picArr = reactive({ arr: [] })
let zipContent = ref('')

const fn = (e) => {// console.log(e.target.files[0]);let zip = new JSZip()// loadAsync() 读取现有的zip，并在当前文件夹级别合并当前JSZip对象中的数据// 如果两个具有相同的名称，则加载的一个将替换另一个zip.loadAsync(e.target.files[0]).then(zipdata => {// console.log(zipdata.files);for (let n in zipdata.files) {// console.log(zipdata.files[n]);
// .file(name) 读取文件在当前目录zipdata// 获得指定文件里面的文件名字.file(zip.files[n].name)// 指定返回结果类型.async('text').then(res => {// 打印文本信息console.log(res);zipContent.value = res})}})
}
</script>

<style scoped>
div {margin: 0 auto;
}
</style>

结果显示