1、安裝依賴并引入

　　npm install jszip --save

　　npm install file-saver --save

　　import JSZip from 'jszip'
　　import FileSaver from 'file-saver'
2、將遠(yuǎn)程或本地圖片的url轉(zhuǎn)換成base64，然后下載

 /**
   *多個(gè)圖片壓縮成zip導(dǎo)出
   */
 private downloadZip() {
   let that = this
   const zip = new JSZip()
   let arrs:any = [] // 這個(gè)數(shù)組只用于判斷圖片是否都轉(zhuǎn)換成base64
   setTimeout(_ => {
     let arr = that.multipleSelections // 待轉(zhuǎn)換的數(shù)據(jù)（包含圖片的名和地址）
     arr.forEach((item:any) => {
       let fileName = item.orgName // 圖片那么
       let url = ''
       // item.shareImg 是圖片地址
       that.getBase64(item.shareImg, (dataURL:any) => {
         url = dataURL // 圖片url轉(zhuǎn)換成base64
         zip.file(fileName + '.png', url.substring(22), { base64: true })
         arrs.push(url)
         if (arrs.length === that.multipleSelections.length) { // 若要導(dǎo)出的圖片全部轉(zhuǎn)換為base64了，則開(kāi)始導(dǎo)出
           zip.generateAsync({ type: 'blob' }).then(content => {
             FileSaver.saveAs(content, '二維碼.zip')
           })
         }
       })
     })
   }, 0)
 }
 // 圖片url轉(zhuǎn)換成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

　　

總結(jié)

以上是生活随笔為你收集整理的vue 项目图片批量导出并压缩成zip的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。