vue实现批量下载文件流并压缩

为了实现文件流压缩，我们可以使用 JSZip 和 FileSaver 这两个第三方库。JSZip 是一个用于创建、读取和编辑 .zip 文件的 JavaScript 库，而 FileSaver 则用于在客户端保存文件。

• ‌JSZip‌：用于创建和操作zip文件。可以通过 file 方法将文件添加到zip中，通过 generateAsync
  方法生成zip文件。 ‌
• ‌FileSaver‌：用于将生成的zip文件保存到本地。通过 saveAs 方法可以实现文件保存。

首先要安装插件

npm install jszip file-saver

然后，在Vue组件中编写代码实现文件流压缩功能。

<template><div><button @click="downloadZip">下载压缩包</button></div>
</template><script>
import JSZip from 'jszip';
import { saveAs } from 'file-saver';
import axios from 'axios';export default {methods: {async downloadZip() {const zip = new JSZip();// 下面是示例文件名，项目中改成勾选的数据const fileNames = ['file1.txt', 'file2.txt', 'file3.txt']; // 示例文件名const promises = fileNames.map(fileName => this.getFileAsStream(fileName).then(blob => {zip.file(fileName, blob);}));await Promise.all(promises);const content = await zip.generateAsync({ type: 'blob' });saveAs(content, '批量下载.zip');},async getFileAsStream(fileName) {// 这里假设你有一个后端接口可以返回文件流const response = await axios.get(`/path/to/your/api/${fileName}`, {responseType: 'arraybuffer' // 如果不行改成blob });const blob = new Blob([response.data], { type: 'application/octet-stream' });return blob;}}
};
</script>