Vue.js组件开发-实现多个文件附件压缩下载

在 Vue 项目中实现多个附件压缩下载，可以借助 jszip 库来创建压缩文件，以及 file-saver 库来保存生成的压缩文件。

步骤 1：安装依赖

首先，在 Vue 项目中安装 jszip 和 file-saver：

npm install jszip file-saver

步骤 2：编写 Vue 组件代码

以下是一个完整的 Vue 组件示例，用于实现多个附件的压缩下载功能：

<template><div><!-- 下载按钮，点击触发 downloadFiles 方法 --><button @click="downloadFiles">下载附件压缩包</button></div>
</template><script>
// 引入 JSZip 库，用于创建和管理压缩文件
import JSZip from 'jszip';
// 引入 FileSaver 库，用于保存生成的文件
import { saveAs } from 'file-saver';export default {data() {return {// 存储要下载的附件的 URL 列表fileUrls: ['https://example.com/file1.pdf','https://example.com/file2.docx','https://example.com/file3.txt']};},methods: {async downloadFiles() {// 创建一个新的 JSZip 实例，用于创建压缩文件const zip = new JSZip();try {// 遍历文件 URL 列表for (const url of this.fileUrls) {// 发起 HTTP 请求获取文件数据const response = await fetch(url);// 检查响应状态是否为成功（状态码 200）if (!response.ok) {throw new Error(`无法下载文件: ${url}`);}// 获取文件的二进制数据const blob = await response.blob();// 从 URL 中提取文件名const fileName = url.split('/').pop();// 将文件添加到压缩包中zip.file(fileName, blob);}// 生成压缩文件的二进制数据const zipBlob = await zip.generateAsync({ type: 'blob' });// 使用 FileSaver 保存压缩文件，文件名为 attachments.zipsaveAs(zipBlob, 'attachments.zip');} catch (error) {// 捕获并打印下载过程中可能出现的错误console.error('下载文件时出错:', error);}}}
};
</script><style scoped>
/* 为按钮添加一些样式 */
button {padding: 10px 20px;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;
}button:hover {background-color: #0056b3;
}
</style>

代码解释

模板部分（<template>）：
- 包含一个按钮，点击该按钮会触发 downloadFiles 方法。
脚本部分（<script>）：
- data 函数：返回一个包含 fileUrls 的对象，fileUrls 是一个数组，存储了要下载的附件的 URL 列表。
- downloadFiles 方法：
  - 创建一个新的 JSZip 实例 zip，用于创建压缩文件。
  - 使用 for...of 循环遍历 fileUrls 数组。
  - 对于每个 URL，使用 fetch 发起 HTTP 请求获取文件数据。
  - 检查响应状态是否为成功（状态码 200），如果不是则抛出错误。
  - 使用 response.blob() 获取文件的二进制数据。
  - 从 URL 中提取文件名，并使用 zip.file() 方法将文件添加到压缩包中。
  - 调用 zip.generateAsync({ type: 'blob' }) 生成压缩文件的二进制数据。
  - 使用 saveAs 方法保存压缩文件，文件名为 attachments.zip。
样式部分（<style>）：
- 为按钮添加了一些样式，使其在页面上显示得更美观。

使用说明

替换文件 URL：将 data 中的 fileUrls 数组替换为你实际要下载的附件的 URL 列表。
引入组件：将上述代码保存为一个 Vue 组件（例如 DownloadZip.vue），然后在其他组件中引入并使用：

<template><div><DownloadZip /></div>
</template><script>
import DownloadZip from './DownloadZip.vue';export default {components: {DownloadZip}
};
</script>