Example of preview zip implementation in vue

The data stream of zip is obtained from the backend interface as a blob form. Use the plug-in jszip to extract the directory in zip and bind it to a-tree.

At the same time, modify the icon in the tree according to the type of file in the compressed package and modify the style to make the display clearer.

1. Add jszip plugin:

yarn add jszip

(I usually use yarn to add, and it is very stable and fast when adding, and rarely has problems)

2. Since only a certain page in my project uses this function, I use a local reference:

Introduced on the page using this feature:

import JSZip from 'jszip'

3. For page design, I used a-tree to display it, mainly using treeData data:

The format is as follows:

const treeData = [
   {
     title: "root",
     key: "",
     scopedSlots: { icon: "folder" },
     children: [
      {
        title: "folder1",
        key: "0-1",
        id:"0-1",
        parentId:"",
        scopedSlots: { icon: "folder" },
        children: [
          { title: "", key: "0-1-1", parentId:"0-1",scopedSlots: { icon: "txt" } },
          { title: "", key: "0-1-2", parentId:"0-1",scopedSlots: { icon: "png" } },
          { title: "", key: "0-1-3", parentId:"0-1", scopedSlots: { icon: "xml" } },
        ],
      },
      {
        title: "folder2",
        key: "0-2",
        id:"0-2",
        parentId:"",
        scopedSlots: { icon: "folder" },
        children: [
          { title: "", key: "0-2-1", parentId:"0-2",scopedSlots: { icon: "childEdit" } },
        ],
      },
      {
        title: "",
        key: "0-3",
        id:"0-3",
        parentId:"",
        scopedSlots: { icon: "pdf" },
      },
  ],
 },
];

The html of a--tree is as follows:

<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>

The style is as follows, you can modify it at will:

#ziptree .anticon{
  font-size: 20px; color: #08c
}
#ziptree .{
   color: #e7c146
}
#ziptree .{
   color: #2a0ae2
}
#ziptree .{
   color: #e90b1e
}
#ziptree .{
   color: #047449
}
#ziptree .{
   color: #435892
}
#ziptree .{
   color: #b9c6e7
}
#ziptree .{
   color: #82c0a8
}

4. Obtain data through the interface and process data:

 downloadAttachmentStream(option).then((res)=&gt;{        
                        if (!res &amp;&amp; !=200 &amp;&amp;  == "application/json") {
                            this.$('The file cannot be found')
                            return
                        }
                        let jszip = new JSZip()
                        ().then(zip=&gt;{
                          let myData=[]
                          (zip, myData,0,)
                          =myData
                          that.$nextTick(()=&gt;{
                            =['0']
                          })
                        })
                    });

The transformData method is as follows:

  transformData(obj, myData, level = 0) {
      let id=0
      if(().length==0){
        let fname=(0, ("."))
        let rootData={id:'0',parentId:'', key:'0',title:fname, fullName:fname+'/' ,type:'dir', children:[],slots:{ icon: "folder" }}
        (rootData)
      }else{
      for (let key in ) {
        let array=('/').filter(item =&gt; item != '')
        if( == level+1){
          if ([key].dir) { 
            if(level==0){ // Root There is only one              let rootData={id:'0',parentId:'', key:'0',title:array[level], fullName:key ,type:'dir', children:[],slots:{ icon: "folder" }}
              (rootData)
              (obj, rootData,level+1)
            }else{
              // Non-root directory              if(()===0 &amp;&amp; key!=  &amp;&amp;  == level+1){
              let newData={id:+'-'+id, key:+'-'+id,parentId:, title:array[level], type:'dir', children:[],fullName:key,slots:{ icon: "folder" }}
              (newData)
              id++
              (obj, newData,level+1)
              }
            }
          }else{ // document           if(()==0 &amp;&amp; key!=){
            let data= {id:+'-'+id,parentId:, key:+'-'+id,title:array[level], type:array[level].replace(/.+\./, ""),fullName:key,}
             if(['jpg','png','gif'].includes()){
              ={icon: "image"}
             }else if(=='mp3'){
               ={icon: 'audio'}
             }else if(=='mp4'){
               ={icon: 'video'}
             } else if(=='xlsx'){
               ={icon: 'xml'}
             } else{
              ={icon: }
             }
             (data)
             id++
           }
          }
        }else{
          //
        }
      }
      } 
      return myData;
    },

After the above steps, you can realize a very beautiful directory tree for compressed packages.

This is the end of this article about the implementation example of preview zip in vue. For more related vue preview zip content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!