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，并提供了一个完整的示例代码和依赖安装步骤。希望这对你有所帮助！