Vue之前端批量下载文件并以压缩包形式存储

后端返回一个文件链接的数组，前端处理下载逻辑，并且将这些文件存储在压缩包内部，这用的jszip 和 file-saver 这两个库。

步骤说明

1.使用 npm 或 yarn 安装 jszip 和 file-saver。

   npm install jszip file-saver

2.获取文件内容：

使用 fetch API 获取每个文件的内容。

3.生成压缩文件：

使用 jszip 将获取到的文件内容添加到压缩包中。
4.下载压缩文件：

使用 file-saver 将压缩包下载到客户端。

实例：
 

import JSZip from 'jszip';
import { saveAs } from 'file-saver';

async function fetchAndCompressFiles(fileUrls) {
    const zip = new JSZip();

    // 并发请求文件内容
    const fileContents = await Promise.all(
        fileUrls.map(async (url) => {
            const response = await fetch(url);
            if (!response.ok) {
                throw new Error(`Failed to fetch ${url}: ${response.statusText}`);
            }
            return response.blob();
        })
    );

    // 添加文件到压缩包
    fileUrls.forEach((url, index) => {
        const fileName = url.substring(url.lastIndexOf('/') + 1);
        zip.file(fileName, fileContents[index], { binary: true });
    });

    // 生成压缩包 Blob
    const blob = await zip.generateAsync({ type: 'blob' });

    // 下载压缩包
    saveAs(blob, 'compressed-files.zip');
}

// 示例文件 URL 数组
const fileUrls = [
    'http://example.com/file1.txt',
    'http://example.com/file2.txt',
    'http://example.com/file3.txt'
];

// 下载按钮的点击事件
document.getElementById('downloadButton').addEventListener('click', async () => {
    try {
        await fetchAndCompressFiles(fileUrls);
    } catch (error) {
        console.error('Error compressing and downloading files:', error);
    }
});