多文件压缩

使用vue+jszip完成文件压缩

需求
多个文件下载成一个zip的压缩包

一、安装

需要用到的包 jszip 和 file-saver
npm install jszip file-saver

二、文件压缩

伪代码

1. 链接形式

import JSZip from 'jszip';
import { saveAs } from 'file-saver';
const zip = new JSZip();

// 假设你的文件是通过某种方式获取的，比如从服务器获取
const files = [
  { name: 'file1.xlsx', url: 'path/to/file1.xlsx' },
  { name: 'file2.xlsx', url: 'path/to/file2.xlsx' },
  { name: 'file3.xlsx', url: 'path/to/file3.xlsx' },
];

const promises = files.map(async (file) => {
  // 处理：将接口请求回来的数据转成blob
  const response = await fetch(file.url); 
  const blob = await response.blob();
  // 将所有 Blob 添加到 ZIP 文件中
  zip.file(file.name, blob);
});

// 一次性请求
await Promise.all(promises);

// 生成 ZIP 文件
const content = await zip.generateAsync({ type: 'blob' });
// 下载 ZIP 文件
saveAs(content, 'files.zip');

2. blob格式

import JSZip from 'jszip';
import { saveAs } from 'file-saver';
const zip = new JSZip();

const blob = new Blob([template], { type: 'application/vnd.ms-excel' });
this.excelBlobs.push({ name: `${excelName}.xls`, blob }); // 添加到数组中

// 将所有 Blob 添加到 ZIP 文件中
this.excelBlobs.forEach(file => {
  zip.file(file.name, file.blob);
});

// 生成 ZIP 文件
const content = await zip.generateAsync({ type: 'blob' });
// 下载 ZIP 文件
saveAs(content, 'files.zip');