前端實現批量導出圖片並打包壓縮功能

需求

管理後臺需要批量導出二維碼圖片

實現難點

選擇相應的圖片批量導出或直接批量導出並壓縮在一個文件夾裏

思路分析

1.先將選中二維碼的地址存在一個數組中
2.依次請求圖片並將其下載
3.後用jszip壓縮文件
4.最後用file-saver生成文件

實現

實現的代碼如下

import axios from 'axios'
import JSZip from 'jszip'
import FileSaver from 'file-saver'
getFile = (url) => {
      return new Promise((resolve, reject) => {
        axios({
          method: 'get',
          url,
          responseType: 'arraybuffer'
        }).then(data => {
          resolve(data.data)
        }).catch(error => {
          reject(error.toString())
        })
      })
    };
}
// 批量下載
handleBatchDownload = async(selectImgList) => {
      const data = selectImgList;
      const zip = new JSZip()
      const cache = {}
      const promises = []
      await data.forEach(item => {
          const promise = this.getFile(item).then(data => { // 下載文件, 並存成ArrayBuffer對象
          const arr_name = item.split("/");
          let file_name = arr_name[arr_name.length - 1] // 獲取文件名
          // if (file_name.indexOf('.png') == -1) {
         //    file_name = file_name + '.png'
         // }
          zip.file(file_name, data, {
            binary: true
          }) // 逐個添加文件
          cache[file_name] = data
        })
        promises.push(promise)
      })
      Promise.all(promises).then(() => {
        zip.generateAsync({
          type: "blob"
        }).then(content => { // 生成二進制流
          FileSaver.saveAs(content, "photo.zip") // 利用file-saver保存文件
        })
      })
    
};
    

知識點總結

1.插件file-saver的使用

• a標籤download屬性下載不了跨域圖片直接在瀏覽器預覽，利用file-saver將跨域訪問的圖片下載
• 可以file-saver下載其他文件，詳情可去參考其API
• 如果你需要保存較大的文件，不受 blob 的大小限制或內存限制，可以看一下更高級的 StreamSaver.js

2.插件jszip的使用

• 點擊批量下載所有圖片都在瀏覽器下載文件多表現不友好，需將批量下載的圖片打包進壓縮包裏，故引進了JSZip進行打包
• JSZip是一個用於創建，閱讀和編輯.zip文件的JavaScript庫，具有友好而簡單的API,詳細用法可以參照其API

備註 ：

1. 注意的是responseType, 如果下載文件是文本類型的(如: .txt, .js之類的),那麼用responseType: 'text'也可以, 但是如果下載的文件是圖片, 視頻之類的, 就得用arraybuffer
2. 如果下載的文件過大, 打包的時間將會很長, 甚至可能會導致瀏覽器奔潰
3. 還需要注意的一點是請求圖片資源時因其是異步請求，需要等所有圖片請求完再進行打包這一步，在請求資源時需要await

參考文檔

file-saver地址
JSZip參考文檔地址