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: fil