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

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

步骤 1：安装依赖

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

bash 复制代码

npm install jszip file-saver

步骤 2：编写 Vue 组件代码

以下是一个完整的 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.zip
        saveAs(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），然后在其他组件中引入并使用：

vue 复制代码

<template>
  <div>
    <DownloadZip />
  </div>
</template>

<script>
import DownloadZip from './DownloadZip.vue';

export default {
  components: {
    DownloadZip
  }
};
</script>

运行项目：在浏览器中打开 Vue 项目，点击"下载附件压缩包"按钮，即可下载包含多个附件的压缩文件。

注意事项

确保你有访问这些文件 URL 的权限，因为浏览器的同源策略可能会限制跨域请求。如果遇到跨域问题，可以在服务器端进行代理请求。
此示例假设文件 URL 是有效的，并且服务器能够正常响应请求。如果文件 URL 无效或服务器出现问题，可能会导致下载失败。