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>