vue前端实现多个url下载并合并为zip文件

一、安装

npm install jszip
npm install file-saver

二、引入

import axios from 'axios'
import JSZip from "jszip";
import FileSaver from "file-saver";

三、核心代码

videoData:['/video/26519f026fc012521605563015227403.mp4','/video/f7b9cdae14ad51e491b62742f71c43e7.mp4','/video/1f82d79e0a9ef414419275a5f1d6bb94.mp4'],



download1(){
        var videoData = this.videoData;
        const zip = new JSZip();
        var promises = [];
        videoData.forEach(item => {
          const promise = this.getFile(item).then(data => {
            const arr_name = item.split("/");
            const file_name = arr_name[arr_name.length - 1]; // 获取文件名
            console.log(data)
            zip.file(file_name, data, { binary: true });
          });
          promises.push(promise);
        });
        Promise.all(promises).then(() => {
          console.log("全部下载完成");
          zip.generateAsync({ type: "blob" }).then(content => {
            // 生成二进制流
            console.log("生成压缩包");
            FileSaver.saveAs(content, "时间戳.zip");
          });
        });
      },
      getFile(url){
        return new Promise((resolve, reject) => {
          axios({
            method: "get",
            url:url,
            responseType: "blob"
          })
            .then(data => {
              resolve(data.data);
            })
            .catch(error => {
              reject(error.toString());
            });
        });
      },