vue 項目圖片批量導出並壓縮成zip

1、安裝依賴並引入

　　npm install jszip --save

　　npm install file-saver --save

　　import JSZip from 'jszip'

　　import FileSaver from 'file-saver'

2、將遠程或本地圖片的url轉換成base64，然后下載

 /**
   *多個圖片壓縮成zip導出
   */
 private downloadZip() {
   let that = this
   const zip = new JSZip()
   let arrs:any = [] // 這個數組只用於判斷圖片是否都轉換成base64
   setTimeout(_ => {
     let arr = that.multipleSelections // 待轉換的數據（包含圖片的名和地址）
     arr.forEach((item:any) => {
       let fileName = item.orgName // 圖片那么
       let url = ''
       // item.shareImg 是圖片地址
       that.getBase64(item.shareImg, (dataURL:any) => {
         url = dataURL // 圖片url轉換成base64
         zip.file(fileName + '.png', url.substring(22), { base64: true })
         arrs.push(url)
         if (arrs.length === that.multipleSelections.length) { // 若要導出的圖片全部轉換為base64了，則開始導出
           zip.generateAsync({ type: 'blob' }).then(content => {
             FileSaver.saveAs(content, '二維碼.zip')
           })
         }
       })
     })
   }, 0)
 }
 // 圖片url轉換成base64
 private getBase64(url:string, callback:any) {
   var Img = new Image()
   var dataURL = ''
   Img.src = url + '?v=' + Math.random()
   Img.setAttribute('crossOrigin', 'Anonymous')
   Img.onload = function() {
     var canvas:any = document.createElement('canvas')
     var width = Img.width
     var height = Img.height
     canvas.width = width
     canvas.height = height
     canvas.getContext('2d').drawImage(Img, 0, 0, width, height)
     dataURL = canvas.toDataURL('image/jpeg')
     return callback ? callback(dataURL) : null
   }
 }

　JSzip API地址：https://stuk.github.io/jszip/documentation/api_jszip/constructor.html