vue中预览zip的实现示例
作者: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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!