vue中预览zip的实现示例
更新时间：2023年09月14日 08:58:35 作者：reembarkation
打包压缩成zip的东西,再解压,很麻烦,本文主要介绍了vue中预览zip的实现示例,具有一定的参考价值,感兴趣的可以了解一下
zip的数据流从后端接口获取为blob形式，使用插件jszip, 提取出zip中的目录并绑定到a-tree中。
同时根据压缩包中文件的类型来修改tree中的icon,并修改样式使显示更加清晰。
1. 添加jszip插件：
yarn add jszip
(我一般都使用yarn添加，添加的时候很稳定快速，很少出问题)
2. 由于我的项目中只是某个页面使用到该功能，所以使用局部引用：
在使用该功能的页面引入：
import JSZip from 'jszip'
3. 页面设计，我使用了a-tree来展示，主要用到了treeData数据：
格式如下：
const treeData = [
{
title: "root",
key: "",
scopedSlots: { icon: "folder" },
children: [
{
title: "folder1",
key: "0-1",
id:"0-1",
parentId:"",
scopedSlots: { icon: "folder" },
children: [
{ title: "1.txt", key: "0-1-1", parentId:"0-1",scopedSlots: { icon: "txt" } },
{ title: "3.png", key: "0-1-2", parentId:"0-1",scopedSlots: { icon: "png" } },
{ title: "2.xml", key: "0-1-3", parentId:"0-1", scopedSlots: { icon: "xml" } },
],
},
{
title: "folder2",
key: "0-2",
id:"0-2",
parentId:"",
scopedSlots: { icon: "folder" },
children: [
{ title: "7.xlsx", key: "0-2-1", parentId:"0-2",scopedSlots: { icon: "childEdit" } },
],
},
{
title: "6.pdf",
key: "0-3",
id:"0-3",
parentId:"",
scopedSlots: { icon: "pdf" },
},
],
},
];a--tree的html如下：
<a-tree
showIcon
:default-expanded-keys="expandedKeys"
:expandedKeys="expandedKeys"
:selectedKeys="selectedKeys"
:treeData="treeData"
@expand="onExpand"
@select="onSelect"
>
<a-icon slot="folder" class="folder" type="folder" />
<a-icon slot="image" class="image" type="file-image" />
<a-icon slot="audio" class="audio" type="audio" />
<a-icon slot="video" class="video" type="video-camera" />
<a-icon slot="docx" class="docx" type="file-word" />
<a-icon slot="xml" class="xml" type="file-excel" />
<a-icon slot="pdf" class="pdf" type="file-pdf" />
<a-icon slot="zip" class="zip" type="file-zip" />
<a-icon slot="txt" class="txt" type="file-text" />
</a-tree>其中样式如下，可以自己任意修改：
#ziptree .anticon{
font-size: 20px; color: #08c
}
#ziptree .anticon.folder{
color: #e7c146
}
#ziptree .anticon.docx{
color: #2a0ae2
}
#ziptree .anticon.pdf{
color: #e90b1e
}
#ziptree .anticon.xml{
color: #047449
}
#ziptree .anticon.zip{
color: #435892
}
#ziptree .anticon.txt{
color: #b9c6e7
}
#ziptree .anticon.image{
color: #82c0a8
}4. 通过接口获取数据并处理数据：
downloadAttachmentStream(option).then((res)=>{
if (!res && res.status!=200 && res.data.type == "application/json") {
this.$message.error('找不到该文件')
return
}
let jszip = new JSZip()
jszip.loadAsync(res.data).then(zip=>{
let myData=[]
that.transformData(zip, myData,0,)
that.treeData=myData
that.$nextTick(()=>{
that.expandedKeys=['0']
})
})
});其中transformData方法如下：
transformData(obj, myData, level = 0) {
let id=0
if(Object.keys(obj.files).length==0){
let fname=this.fileName.substring(0, this.fileName.lastIndexOf("."))
let rootData={id:'0',parentId:'', key:'0',title:fname, fullName:fname+'/' ,type:'dir', children:[],slots:{ icon: "folder" }}
myData.push(rootData)
}else{
for (let key in obj.files) {
let array=key.split('/').filter(item => item != '')
if(array.length == level+1){
if (obj.files[key].dir) {
if(level==0){ // 根 只有一个
let rootData={id:'0',parentId:'', key:'0',title:array[level], fullName:key ,type:'dir', children:[],slots:{ icon: "folder" }}
myData.push(rootData)
this.transformData(obj, rootData,level+1)
}else{
// 非根目录
if(key.indexOf(myData.fullName)===0 && key!= myData.fullName && array.length == level+1){
let newData={id:myData.id+'-'+id, key:myData.id+'-'+id,parentId:myData.id, title:array[level], type:'dir', children:[],fullName:key,slots:{ icon: "folder" }}
myData.children.push(newData)
id++
this.transformData(obj, newData,level+1)
}
}
}else{ // 文件
if(key.indexOf(myData.fullName)==0 && key!=myData.fullName){
let data= {id:myData.id+'-'+id,parentId:myData.id, key:myData.id+'-'+id,title:array[level], type:array[level].replace(/.+\./, ""),fullName:key,}
if(['jpg','png','gif'].includes(data.type)){
data.slots={icon: "image"}
}else if(data.type=='mp3'){
data.slots={icon: 'audio'}
}else if(data.type=='mp4'){
data.slots={icon: 'video'}
} else if(data.type=='xlsx'){
data.slots={icon: 'xml'}
} else{
data.slots={icon: data.type}
}
myData.children.push(data)
id++
}
}
}else{
//
}
}
}
return myData;
},经过以上步骤就能实现一个很漂亮的压缩包的目录树了。
到此这篇关于vue中预览zip的实现示例的文章就介绍到这了,更多相关vue预览zip内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了VUE项目实现主题切换的方法，本文通过多种方法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-11-11
这篇文章主要介绍了Vue2.0 ES6语法降级ES5的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
vue3中reactive数据被重新赋值后无法双向绑定的解决
这篇文章主要介绍了vue3中reactive数据被重新赋值后无法双向绑定的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
路由守卫，简单理解来说就是，当用户要进行一些操作时，我需要用户的一些信息或数据或行为，我判断过后，才会同意用户进行操作，说到这里，我想大家心里都或多或少有点理解了吧2023-01-01
这篇文章主要为大家分享了关于Vue.js一些问题和思考的学习笔记,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家详细介绍了vue利用插件实现按比例切割图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家详细介绍了vant时间控件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
今天小编就为大家分享一篇vue.js中proxyTable 转发请求的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了vue实现点击按钮倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要给大家介绍了关于Vue源码分析之Vue实例初始化的相关资料,需要的朋友可以参考下2019-08-08
最新评论