Vue实现文件批量打包压缩下载

讲解"Vue实现文件批量打包压缩下载"的完整攻略。

一、问题描述

在Vue项目中，我们有时需要将多个文件打包成一个压缩文件并提供下载。那么如何使用Vue来实现这个需求呢？

二、解决方案

我们可以使用JSZip和FileSaver.js这两个库来实现此功能。

2.1 安装依赖

首先需要安装的是 jszip 和 file-saver：

npm install jszip file-saver --save

2.2 实现

下面是一个简单的 Vue 组件，演示了如何将多个文件压缩成一个文件并提供下载。

<template>
  <div>
    <h2>文件批量打包压缩下载</h2>
    <button @click="download">打包下载</button>
  </div>
</template>

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

export default {
  name: "FileDownloader",
  data() {
    return {
      files: [
        { name: "file1.txt", content: "hello world" },
        { name: "file2.pdf", content: "%PDF-1.4%\n1 0 obj\n ...\nendobj\n%%EOF" }
      ]
    };
  },
  methods: {
    async download() {
      const zip = new JSZip();
      this.files.forEach(file => zip.file(file.name, file.content));
      const blob = await zip.generateAsync({ type: "blob" });
      saveAs(blob, "files.zip");
    }
  }
};
</script>

上述代码中，我们通过引入 JSZip 和 file-saver 两个库来实现文件压缩和下载的功能。在 Vue 实例化的时候，我们提供了一个 files 数组，该数组存储了你想压缩的文件。在 download 方法中，我们实例化 JSZip 并使用 forEach 循环将文件添加到压缩包中。最后，我们调用 generateAsync 方法生成 zip 文件并使用 saveAs 方法下载该文件。

我们还可以使用 axios 获取异步文件并将其添加到 JSZip 对象中。在示例代码中，我们为了方便将一个字符串定为文件内容，实际上也可以读取文件来实现。

2.3 示例说明

下面是一个更加完整的样例，展示了如何动态获取数据，将所有数据批量打包成 zip 文件并提供下载：

<template>
  <div>
    <h2>文件批量打包压缩下载</h2>
    <table>
      <thead>
        <tr>
          <th>文件名称</th>
          <th>文件大小(K)</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="file in files" :key="file.id">
          <td>{{ file.name }}</td>
          <td>{{ file.size }}</td>
          <td><a :href="file.url" download>{{ file.name }}</a></td>
        </tr>
      </tbody>
    </table>
    <button @click="downloadAll">打包下载所有文件</button>
  </div>
</template>

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

export default {
  name: "FileDownloader",
  data() {
    return {
      files: []
    };
  },
  created() {
    this.getFiles();
  },
  methods: {
    async getFiles() {
      const { data } = await axios.get("/api/files");
      this.files = data;
    },
    async downloadAll() {
      const zip = new JSZip();
      const promises = this.files.map(file => axios.get(file.url, { responseType: "blob" }));

      Promise.all(promises)
        .then(responses => {
          responses.forEach((response, i) => {
            zip.file(`${this.files[i].name}`, response.data);
          });

          return zip.generateAsync({ type: "blob" });
        })
        .then(blob => {
          saveAs(blob, "files.zip");
        });
    }
  }
};
</script>

在上述示例代码中，我们使用 axios 发送请求动态获取文件信息并渲染到页面上。用户可以点击每个文件的下载链接单个下载文件，也可以点击视图底部的“打包下载所有文件”按钮将所有文件打包成一个文件并提供下载。