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());});});},