DAY20 - 档案处理 - 利用jszip和file-saver，制作网页下载zip档案

情境

有多个文件或图档利用checkbox勾选後，可以直接点选下载按钮。此时网站会将刚刚所选择的项目打包成一包zip下载到你的电脑中。

使用套件 - jszip, file-saver

jszip

1. 可以将多个档案打包成zip档案
2. 可以透过npm下载 npm install jszip

file-saver.js

1. 可以协助浏览器产生档案在client端
2. 可以透过npm下载 npm install file-saver

想法流程

1. 取得被选取的档案
2. 若需要资料夹则需建立 zip.folder(资料夹名称)
3. 根据需求处理档案 zip.file(需被存入的档案)
   • Ex. 透过iamge url将图档转换为base64格式
   • Ex. 也许需要写入文字档案
4. zip所有档案後，透过file-saver中saveAs存到本机

程序范例 （以vue.js为例)

UI Demo画面

选择需要的图档後，按下载，打包图档至zip并产出文件告知被选去的图档id

code demo 连结

这边就不一一放code，我们来看看最核心的部分

//选择图档，点击下载按钮後
download() {
      const _self = this;
      this.selectedList = []; 
      
      // 取得被选取的列表
      this.selectedList = this.data.filter(item => item.isCheck);
      // create zip 
      const zip = new JSZip();
      // - create folder
      let note = zip.folder("note");
      let selectedIdNum = '';
      _self.selectedList.map(item => selectedIdNum += item.id + ',');
      
      // - 建立文件，并给予动态的content
      let txt = _self.selectedList.length > 0 ? `被选择的图档id:${selectedIdNum}`: '没有被选择的图档'
      note.file("note.txt", txt);
      
      
      //将选取的图档，转为base64後，加到zip中
      _self.selectedList.forEach((item, index) => {
      //呼叫转换image to base64 的 function
      _self.getBase64Image(`https://fakeimg.pl/${item.img}`,function(dataUrl) {
          let _url = dataUrl.replace('data:image/png;base64,', '')
          //将转好base64的内容，加入zip党
          zip.file(`${item.id}.png`, _url,{base64: true});
          
          if(index === _self.selectedList.length-1){
             //将所有档案打包
             zip.generateAsync({type:"blob"})
               .then(function(content) {
                  //  储存这个zip到local端
                  saveAs(content, "example.zip");
               });
           }
        }, 'image/png')//end: getBase64Image
      })

    },

jszip真的是蛮方便好用的插件可以做到将档案打包zip，可能依照需求还有json或其他类型档案，不过今天就用简单的范例，跟大家分享，如果要透过网站做到zip档案的作法罗