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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了vue3使用Vite打包组件库从0搭建过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
本文主要介绍了Vue实现PC端分辨率自适应的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家详细介绍了vue使用echarts图表的详细方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要介绍了TinyMCE富文本编辑器在Vue中的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了通过vue-cli3构建一个SSR应用程序,以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。2018-09-09
这篇文章主要介绍了详解vue-router 初始化时做了什么,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了vue-cli项目优化 缩短首屏加载时间,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了详解Vue template 如何支持多个根结点，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了vue页面如何及时更新页面数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vue循环el-button实现点击哪个按钮,那个按钮就变色
这篇文章主要介绍了vue循环el-button实现点击哪个按钮,那个按钮就变色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论