vue3中批量下载文件（压缩包）功能

vue3中批量下载文件（压缩包）功能

在这篇博客文章中，我们将介绍如何在vue3中是实现批量下载文件（压缩包）功能，并将多个文件打包成一个 ZIP 文件进行下载。我们将创建一个自定义的 useDownloadFiles hook，并展示如何在组件中使用它。

1. 安装依赖

在开始之前，我们需要安装一些必要的依赖包：

1. axios：用于发送 HTTP 请求。
2. jszip：用于创建 ZIP 文件。
3. file-saver：用于保存文件。

使用 npm 安装这些依赖：

npm install axios jszip file-saver

或者使用 yarn：

yarn add axios jszip file-saver

2. 创建 useDownloadFiles Hook

首先，我们需要创建一个自定义的 useDownloadFiles hook。这个 hook 将帮助我们下载文件并将它们打包成一个 ZIP 文件。

useDownloadFiles.js

import { ref } from 'vue';
import JSZip from 'jszip';
import FileSaver from 'file-saver';
import axios from 'axios';

export function useDownloadFiles() {
  const fileList = ref([]);

  const download = (files, zipName = '下载文件名字.zip') => {
    let zip = new JSZip();
    let promises = [];
    let cache = {};
    let arrImg = files.map(file => ({
      path: file.url,
      name: file.name,
    }));

    for (let item of arrImg) {
      const promise = getImgArrayBuffer(item.path).then(data => {
        zip.file(item.name, data, { binary: true });
        cache[item.name] = data;
      });
      promises.push(promise);
    }

    Promise.all(promises)
      .then(() => {
        zip.generateAsync({ type: 'blob' }).then(content => {
          FileSaver.saveAs(content, zipName);
        });
      })
      .catch(() => {
        alert('文件压缩失败');
      });
  };

  const getImgArrayBuffer = url => {
    return new Promise((resolve, reject) => {
      axios({
        method: 'get',
        url: url,
        responseType: 'blob',
      })
        .then(data => {
          resolve(data.data);
        })
        .catch(error => {
          reject(error.toString());
        });
    });
  };

  return {
    fileList,
    download,
  };
}

3. 使用 useDownloadFiles Hook

接下来，我们将在一个 Vue 组件中使用这个 hook。我们将创建一个按钮，当用户点击按钮时，下载多个文件并将它们打包成一个 ZIP 文件。

ExampleComponent.vue

<template>
  <div>
    <button @click="downloadFiles">下载文件</button>
  </div>
</template>

<script>
import { useDownloadFiles } from '@/hooks/useDownloadFiles';

export default {
  setup() {
    const { download } = useDownloadFiles();

    const downloadFiles = () => {
      const files = [
        { url: 'https://example.com/file1.jpg', name: 'file1.jpg' }, // 图片文件
        { url: 'https://example.com/file2.pdf', name: 'file2.pdf' }, // PDF 文件
        { url: 'https://example.com/file3.txt', name: 'file3.txt' }, // 文本文件
        { url: 'https://example.com/file4.mp4', name: 'file4.mp4' }, // 视频文件
      ];
      download(files, '下载的文件.zip');
    };

    return {
      downloadFiles,
    };
  },
};
</script>

4. 详细说明

1. 创建 useDownloadFiles Hook

我们首先创建了一个 useDownloadFiles hook，它包含一个 download 方法和一个 fileList 变量。download 方法接受一个文件列表和一个 ZIP 文件名作为参数。

2. 定义 getImgArrayBuffer 方法

getImgArrayBuffer 方法使用 Axios 发送 GET 请求来下载文件，并将响应类型设置为 blob。下载完成后，它返回一个 Promise，解析为文件的二进制数据。

3. 在组件中使用 Hook

在 ExampleComponent.vue 中，我们导入并使用了 useDownloadFiles hook。我们定义了一个 downloadFiles 方法，该方法创建一个文件列表，并调用 download 方法来下载这些文件并将它们打包成一个 ZIP 文件。

4. 绑定点击事件

我们在模板中添加了一个按钮，并将 downloadFiles 方法绑定到按钮的点击事件上。当用户点击按钮时，downloadFiles 方法将被调用，开始下载文件并打包成一个 ZIP 文件。

5. 结论

通过创建一个自定义的 useDownloadFiles hook，我们可以轻松地在 Vue 3 应用中实现文件下载功能。这个 hook 使用 Axios 来下载文件，并使用 JSZip 和 FileSaver 将多个文件打包成一个 ZIP 文件进行下载。希望这篇文章对你有所帮助！

---

这篇博客文章详细介绍了如何创建和使用 useDownloadFiles hook，并提供了一个完整的示例代码和依赖安装步骤。希望这对你有所帮助！