头图

根据url批量下载图片或者视频,只需要将图片的url和名称放到数组对象即可,例如:

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

fileArr文件传入到下面的函数中

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() // 创建实例对象
  const promises = []
  // 遍历生成下载文件
  fileArr.forEach((item) => {
    const promise = getFile(item.fvUrl).then((res) => {
      const fvName = item.fvName + ''
      // 创建文件用file(),创建文件夹用 floder()
      zip.file(fvName, res.data, {
        binary: true
      })
    })
    promises.push(promise)
  })
 /** 
Promise.all() 静态方法接受一个 Promise 可迭代对象作为输入,并返回一个 Promise。当所有输入的 Promise 都被兑现时,返回的 Promise 也将被兑现(即使传入的是一个空的可迭代对象),并返回一个包含所有兑现值的数组。如果输入的任何 Promise 被拒绝,则返回的 Promise 将被拒绝,并带有第一个被拒绝的原因。

只有当all([p1, p2, p3]) 中的每一个 Promise 实例的状态都变成 fulfilled, Promise.all()的状态才会变成 fulfilled,此时  p1, p2, p3 的返回值组成一个数据,传给 Promise.all()的回调函数

只要 p1, p2, p3 中任何一个被 rejected,  Promise.all() 的状态就会变成 rejected,此时第一个被 rejected 的实例的返回值,会传给 Promise.all()的回调函数。
      
在上面的代码中,promises 数组中的每一个元素,都是 Promise 实例,所以需要用到 Promise.all()
 */

  // 生成 zip 文件
  Promise.all(promiseAll).then(() => {
    // 生成zip 文件
    zip.generateAsync({
      type: 'blob',  // 文件格式
      compression: 'DEFLATE', // STORE: 默认不压缩, DEFLATE:需要压缩
      compressionOptions: {
        level: 9 // 压缩等级 1~9   1 压缩速度最快, 9 最优压缩方式
      }
    }).then((res) => {
      FileSaver.saveAs(res, `${zipName}.zip`) // 使用FileSaver.saveAs保存文件,文件名可自定义
    })
  })
}

// 这一步为下载文件步骤,通过传入的url下载文件
// 将文件 url 格式转换为 Bolb 类型格式 或者 arraybuffer 格式
const getFile = (fvUrl) => {
  return new Promise((resolve, reject) => {
    axios(fvUrl, {
      method: 'get',  // get请求
      responseType: 'blob' // 返回的数据会被强制转为blob类型 ,转换成arraybuffer 也行
    }).then((res) => {
      resolve(res) // 将下载的文件返回
    }).catch(err => {
      reject(err)
    })
  })
}

export default loadZip;

批量下载并压缩
输入一个文件列表fileArr,每个文件包含文件名fvNamefvUrl
自动为文件名添加正确扩展名,从URL截取后缀,例如:
{ fvName: "image", fvUrl: "example.com/image.jpg" }转换为image.jpg
使用多线程并发下载所有文件,通过Promise.all确保所有文件下载完成后统一打包。

ZIP压缩
使用DEFLATE算法进行压缩,级别9,最高压缩率。
压缩后的ZIP文件通过浏览器自动下载,默认文件名下载文件.zip,支持自定义。

函数封装好后,在对应的页面引入该函数,然后将fileArr, zipName传入即可,例如:

// 需要使用的页面
// ...其他逻辑
loadZip(fileArr, zipName);

参考:
前端js实现根据文件url批量压缩下载成zip包
jszip
file-saver
axios


兔子先森
463 声望552 粉丝

致力于新技术的推广与优秀技术的普及。