vue3 多文件下载zip压缩包

vue3多文件下载zip文件包

效果图

代码块

在这里插入代码片
<template><div><el-button type="primary" @click="downLoadClick">下载文件zip</el-button></div>
</template><script setup lang="ts">
import JSZip from "jszip";   // "jszip": "^3.10.1",const fileUrls = ["https://xxxx.aliyuncs.com/erp-test-upload/note/2024/07/14/1/18123873099490877141/消息通知-未读-20240711185838.xlsx","https://xxxx.aliyuncs.com/erp-test-upload/note/2024/07/14/1/1812387309907144404/th.jpg"
];
const zip = new JSZip();// 下载文件函数
const downLoadClick = async () => {try {await fileSteam(fileUrls); // 等待所有文件处理完毕const blob = await zip.generateAsync({type: 'blob'});const url = window.URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'files.zip'; // 自定义下载的zip文件名称a.click();window.URL.revokeObjectURL(url);} catch (error) {console.error('生成压缩包或下载过程中发生错误：', error);}
};// 文件转文件流且将文件流转成JSZip认可的格式
const fileSteam = async (urls: string[]) => {const promises = urls.map(async (url) => {try {const response = await fetch(url);const blob = await response.blob();const arrayBuffer = await blob.arrayBuffer();const fileName = url.split('/').pop();  // 从 URL 中提取文件名zip.file(fileName || 'file', new Uint8Array(arrayBuffer));} catch (error) {console.error(`Fetch file from ${url} failed:`, error);}});// 等待所有文件都处理完毕await Promise.all(promises);
};</script>