vue中預(yù)覽zip的實(shí)現(xiàn)示例

更新時(shí)間：2023年09月14日 08:58:35 作者：reembarkation

打包壓縮成zip的東西,再解壓,很麻煩,本文主要介紹了vue中預(yù)覽zip的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下

1. 添加jszip插件：
2. 由于我的項(xiàng)目中只是某個(gè)頁(yè)面使用到該功能，所以使用局部引用：
3. 頁(yè)面設(shè)計(jì)，我使用了a-tree來(lái)展示，主要用到了treeData數(shù)據(jù)：
4. 通過(guò)接口獲取數(shù)據(jù)并處理數(shù)據(jù)：

zip的數(shù)據(jù)流從后端接口獲取為blob形式，使用插件jszip, 提取出zip中的目錄并綁定到a-tree中。

同時(shí)根據(jù)壓縮包中文件的類(lèi)型來(lái)修改tree中的icon,并修改樣式使顯示更加清晰。

1. 添加jszip插件：

yarn add jszip

(我一般都使用yarn添加，添加的時(shí)候很穩(wěn)定快速，很少出問(wèn)題)

2. 由于我的項(xiàng)目中只是某個(gè)頁(yè)面使用到該功能，所以使用局部引用：

在使用該功能的頁(yè)面引入：

import JSZip from 'jszip'

3. 頁(yè)面設(shè)計(jì)，我使用了a-tree來(lái)展示，主要用到了treeData數(shù)據(jù)：

格式如下：

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. 通過(guò)接口獲取數(shù)據(jù)并處理數(shù)據(jù)：

 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){ // 根 只有一個(gè)
              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;
    },

經(jīng)過(guò)以上步驟就能實(shí)現(xiàn)一個(gè)很漂亮的壓縮包的目錄樹(shù)了。

到此這篇關(guān)于vue中預(yù)覽zip的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)vue預(yù)覽zip內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: