前言

提示：这里可以添加本文要记录的大概内容：

在工作中由于需求的变动从之前的单个文件的下载修改成下载一个zip的压缩包

提示：以下是本篇文章正文内容，下面案例可供参考

一、安装

你需要这两个库来创建 ZIP 文件并保存它。

npm install jszip file-saver

二、文件压缩：

代码如下（示例）：
代码时整理过的，粘贴复制就可以使用

1.普通格式

<template>
  <div>
    <button @click="downloadZip">下载压缩文件</button>
  </div>
</template>

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

export default {
  methods: {
    async downloadZip() {
      const zip = new JSZip();

      // 生成多个 XLSX 文件
      const fileNames = ['file1.xlsx', 'file2.xlsx', 'file3.xlsx'];
      const dataArray = [
        [['Name', 'Age'], ['Alice', 25], ['Bob', 30]], // file1
        [['Product', 'Price'], ['Apple', 1], ['Banana', 2]], // file2
        [['Country', 'Capital'], ['USA', 'Washington'], ['France', 'Paris']], // file3
      ];

      for (let i = 0; i < fileNames.length; i++) {
        const worksheet = XLSX.utils.aoa_to_sheet(dataArray[i]);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

        // 将工作簿转换为二进制格式
        const xlsxData = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
        zip.file(fileNames[i], xlsxData);
      }

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

2.文件链接

<template>
  <div>
    <button @click="downloadZip">下载压缩文件</button>
  </div>
</template>

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

export default {
  methods: {
    async downloadZip() {
      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) => {
        const response = await fetch(file.url);
        const blob = await response.blob();
        zip.file(file.name, blob);
      });

      await Promise.all(promises);

      const content = await zip.generateAsync({ type: 'blob' });
      saveAs(content, 'files.zip');
    }
  }
};
</script>

3. blob格式

将你生成的blob文件存储起来，然后使用压缩方法进行压缩

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

function downloadZip() {
  const zip = new JSZip();

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

  // 生成 ZIP 文件并下载
  zip.generateAsync({ type: 'blob' }).then(content => {
    saveAs(content, 'excel_files.zip'); // 下载 ZIP 文件
  });
}

总结

根据场景来选择合适的方法，我们之前是blob直接下载的多个文件，在原来的基础上创建了一个变量来接受它，等数量一致时开始下载文件。