let fileArr = [
    {fvUrl:'https://image.xuboren.com/image/2023/07/26/1410829074764cdbaa4314a084eb749e.jpg',
    fvName: '圖片名稱'},
    {fvUrl:'https://image.xuboren.com/image/2023/07/26/49536f24f07b4d0eb0e43171019c5f1f.jpg',
    fvName: '圖片名稱2'}
]

npm install jszip --save 
npm install file-saver --save
npm install axios

// loadZip.js
import JSZip from 'jszip'
import FileSaver from 'file-saver'
import axios from 'axios';
// 批量打包下載
// fileArr下載的list：例如：
const loadZip = async (fileArr, zipName = '下載文件') => {
  fileArr.forEach(el=>{
    el.fvName = `${el.fvName}.${el.fvUrl.split('.').at(-1)}`  // 截取url的后綴名添加到文件名： fvname.jpg
  })
  const zip = new JSZip() // 創(chuàng)建實(shí)例對象
  const promises = []
  // 遍歷生成下載文件
  fileArr.forEach((item) => {
    const promise = getFile(item.fvUrl).then((res) => {
      const fvName = item.fvName + ''
      // 創(chuàng)建文件用file()，創(chuàng)建文件夾用 floder()
      zip.file(fvName, res.data, {
        binary: true
      })
    })
    promises.push(promise)
  })
 /** 
Promise.all() 靜態(tài)方法接受一個 Promise 可迭代對象作為輸入，并返回一個 Promise。當(dāng)所有輸入的 Promise 都被兌現(xiàn)時，返回的 Promise 也將被兌現(xiàn)（即使傳入的是一個空的可迭代對象），并返回一個包含所有兌現(xiàn)值的數(shù)組。如果輸入的任何 Promise 被拒絕，則返回的 Promise 將被拒絕，并帶有第一個被拒絕的原因。
只有當(dāng)all([p1, p2, p3]) 中的每一個 Promise 實(shí)例的狀態(tài)都變成 fulfilled, Promise.all()的狀態(tài)才會變成 fulfilled，此時  p1, p2, p3 的返回值組成一個數(shù)據(jù)，傳給 Promise.all()的回調(diào)函數(shù)
只要 p1, p2, p3 中任何一個被 rejected,  Promise.all() 的狀態(tài)就會變成 rejected，此時第一個被 rejected 的實(shí)例的返回值，會傳給 Promise.all()的回調(diào)函數(shù)。
在上面的代碼中，promises 數(shù)組中的每一個元素，都是 Promise 實(shí)例，所以需要用到 Promise.all()
 */
  // 生成 zip 文件
  Promise.all(promiseAll).then(() => {
    // 生成zip 文件
    zip.generateAsync({
      type: 'blob',  // 文件格式
      compression: 'DEFLATE', // STORE: 默認(rèn)不壓縮， DEFLATE：需要壓縮
      compressionOptions: {
        level: 9 // 壓縮等級 1~9   1 壓縮速度最快， 9 最優(yōu)壓縮方式
      }
    }).then((res) => {
      FileSaver.saveAs(res, `${zipName}.zip`) // 使用FileSaver.saveAs保存文件，文件名可自定義
    })
  })
}
// 這一步為下載文件步驟，通過傳入的url下載文件
// 將文件 url 格式轉(zhuǎn)換為 Bolb 類型格式 或者 arraybuffer 格式
const getFile = (fvUrl) => {
  return new Promise((resolve, reject) => {
    axios(fvUrl, {
      method: 'get',  // get請求
      responseType: 'blob' // 返回的數(shù)據(jù)會被強(qiáng)制轉(zhuǎn)為blob類型 ，轉(zhuǎn)換成arraybuffer 也行
    }).then((res) => {
      resolve(res) // 將下載的文件返回
    }).catch(err => {
      reject(err)
    })
  })
}
export default loadZip;

// 需要使用的頁面
// ...其他邏輯
loadZip(fileArr, zipName);