vue 预览zip

        ZIP的数据从接口传递数据流过来。解析数据流，并将zip的目录绑定到tree中。

1.引入插件jszip：

        yarn add jszip

2.在需要引用的页面引用：

        import JSZip from 'jszip'

3. 实现代码

        

   api(option).then((res)=>{   // 接口获取zip的数据流     let jszip = new JSZip()jszip.loadAsync(res.data).then(zip=>{let myData=[]that.transformData(zip, myData,0,)that.treeData=myData // 将数据绑定到treethat.$nextTick(()=>{that.expandedKeys=['0']})})});transformData(obj, myData, level = 0,) {let id=0if(Object.keys(obj.files).length==0){let fname=this.fileName.substring(0, this.fileName.lastIndexOf("."))let rootData={id:'0',parentId:'', key:'0',title:fname, children:[]}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={parentId:'', key:'0',title:array[level], children:[]}myData.push(rootData)this.transformData(obj, rootData,level+1)}else{if(key.indexOf(myData.fullName)===0 && key!= myData.fullName){let newData={ key:myData.id+'-'+id,parentId:myData.id, title:array[level],children:[],fullName:key}myData.children.push(newData)id++this.transformData(obj, newData,level+1)}}}else{ // 文件if(key.indexOf(myData.fullName)==0 && key!=myData.fullName){let data= {parentId:myData.id, key:myData.id+'-'+id,title:array[level],}myData.children.push(data)id++}}}}}return myData;},