vue中批量下载并压缩为zip（包含base64的图片）

效果图片

1：点击按钮视图

2：下载成功视图

 3：查看打包下载的文档

4：打开的文档和图片

 

步骤：

1. 要安装两个插件 file-saver 和 jszip (  npm install file-saver --save和npm i jszip -S  )
2. 写一个下载的方法，但是不能让这个下载的方法完全执行，在满足请求条件将要下载的时候，要把需要下载的一些文档打包（把需要下载的文档做成一个promis实例，如果成功才将其放到打包的队列中）
3. 将需要下载的文档放到一个数组中队列中

4. Promise .all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。它可以接收一个数组作为参数，参数也可以是一个promise，只有所有的参数都是成功，那么，才会返回成功信息（才算是打包成功）。Promise.all([p1, p2, p3])，p1,p2,p3代表三个需要下载的，promise对象

封装一个批量下载的js文档

/*
  *@Author: FangbinGuo
  *@Date:2023-06-21 10:24:31
  *@Description:
  
*/

import FileSaver from 'file-saver';//npm install file-saver --save
// import JSZip from 'jszip';//npm i jszip -S
import JSZip from 'jszip-sync'// npm install --save jszip-sync
//如果放在外面声明，那么下载的东西会叠加所以，用的时候再在函数中声明
//const zip = new JSZip(); 
import axios from "axios";
import { getToken } from '@/utils/auth';
import { MessageBox, Message } from "element-ui";
//一般后台返回的路径的图片（下面那个是base64图片）
export function download(filePath,fileName) {
  return new Promise((resolve, reject) => {
    axios({
      method:'get',
      url: process.env.VUE_APP_BASE_API +
        "/sys/file/download?filePath=" + filePath+"&_sgk="+getToken(),
      responseType: 'arraybuffer'//
      // responseType: 'blob'//
    }).then(data => {
      // data.request.onload = function (e) {
      //   const url = window.URL.createObjectURL(data.request.response);
      //   const elink = document.createElement('a');
      //   elink.href = url;
      //   elink.target = '_self'; // 当前也 target打开新页面
      //   elink.setAttribute('download', fileName);
      //   elink.style.display = 'none';
      //   document.body.appendChild(elink);
      //   elink.click();
      //   document.body.removeChild(elink);
      // };
      resolve(data.data)
    }).catch(error => {
      // Message({
      //   message: "下载失败！",
      //   type: "error",
      // });
      reject(error.toString())
    })
  })
}
//base64图片批量下载的方法
export function base64ImgtoFile(dataurl, filename) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.src = dataurl;
    image.onload = () => {
      const canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      const context = canvas.getContext("2d");
      context.drawImage(image, 0, 0);
      canvas.toBlob((blob) => {
        const file = new File([blob], `${filename}.png`, {
          type: "image/png"
        });
        resolve(file);
      }, "image/png");
    };
    image.onerror = (error) => reject(error);
  });
}

export function downClick(fileArr){
  const zip = new JSZip();
  const cache = {}
  const promises = [];
  const imgList=[];//将 参数fileArr数组分开 imgList是一般图片
  const base64Img=[];//将 参数fileArr数组分开 base64Img是base64图片
  zip.sync(function() {
    //fileArr是 附件url地址数组 
    fileArr.forEach(item=> {
      // 如果 是 base64 图片的路径  字符含 base64 字符串
      if(item.filePath.indexOf("base64")>0){
        base64Img.push(item);
      }else{
        imgList.push(item);
      }
    })
    console.log("base64图片--base64图片--base64图片--",base64Img)
    console.log("上传文件的图片--上传文件的图片--上传文件的图片--",imgList)
    if(imgList.length>0){
      imgList.forEach(it=>{
        let imgListRes=[];
        // item.filePath 是 处理 fileArr 里的 url地址 
        imgListRes = download(it.filePath,it.fileName)
        .then(data => { // 下载文件, 并存成ArrayBuffer对象
          //it.fileName fileArr里的文件名
          zip.file(it.fileName, data, { binary: true }) // 逐个添加文件
          cache[it.fileName] = data
        })
        promises.push(imgListRes) //加到promises队列里
      })
    }
    if(base64Img.length>0){
      base64Img.forEach(val=> {
        let base64ListRes=[]
        base64ListRes=base64ImgtoFile(val.filePath,val.fileName)
        .then(data => { // 下载文件, 并存成ArrayBuffer对象
          //it.fileName fileArr里的文件名
          zip.file(val.fileName+".png", data, { binary: true }) // 逐个添加文件
          cache[val.fileName] = data
        })
        promises.push(base64ListRes) //加到promises队列里
      })
    }
    // Promise.all  只有上面的 数组promise 都成功才会有 then的代码运行 ,
    //一但失败就运行catch代码
    Promise.all(promises).then(() => { //异步队列全部完成时 执行下面代码
      zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流
        FileSaver.saveAs(content, "打包下载.zip") // 利用file-saver保存文件
      }).catch(err=>{
        Message({
          message: "批量下载失败！",
          type: "error",
        });
      })
    })
  })
}

使用

<el-button @click="downMore">批量下载</el-button>
//引入
import { downClick } from '@/utils/downMore.js';

//点击批量下载
downMore(){
   // this.selectedArrData 是批量选中的文档数组
   downClick(this.selectedArrData)
},