Vue+ElementUI技巧分享：创建一个带有进度显示的文件下载和打包组件

在现代前端开发中，用户体验至关重要，尤其是在处理文件下载时。为用户提供实时的下载进度显示和打包功能，不仅能提升用户体验，还能使应用更具专业性。在本文中，我们将创建一个 Vue 组件，用于显示文件下载进度，并将下载的文件打包成 ZIP 供用户下载。

文章目录

前言
[1. 组件功能概述](#1. 组件功能概述)
[2. 导入所需的包](#2. 导入所需的包)
[3. 构建基础组件](#3. 构建基础组件)
4.实现文件下载与进度显示
[5. 打包文件为 ZIP](#5. 打包文件为 ZIP)
[6. 控制对话框的显示与隐藏](#6. 控制对话框的显示与隐藏)
[7. 可能会遇到的问题：处理跨域请求 (CORS)](#7. 可能会遇到的问题：处理跨域请求 (CORS))
- [7.1 什么是 CORS？](#7.1 什么是 CORS？)
- [7.2 常见的 CORS 错误](#7.2 常见的 CORS 错误)
- [7.3 解决 CORS 问题的方法](#7.3 解决 CORS 问题的方法)
- [7.4 说明](#7.4 说明)
[8. 完整源代码](#8. 完整源代码)
[9. 组件调用](#9. 组件调用)
- [9.1 引入并注册组件](#9.1 引入并注册组件)
- [9.2 组件参数以及解释](#9.2 组件参数以及解释)
总结

前言

在应用中处理多个文件的下载时，用户希望看到清晰的进度显示，同时在下载多个文件时，将它们打包成 ZIP 文件提供下载也是常见需求。通过使用 Vue 和一些实用的 JavaScript 库，我们可以轻松实现这一功能。

1. 组件功能概述

我们要实现的 Vue 组件具备以下功能：

下载多个文件，并实时显示每个文件的下载进度。
打包下载的文件为 ZIP 并显示打包进度。
在进度条内同时显示文件名称和下载百分比。
下载完成后自动关闭对话框。

2. 导入所需的包

在开始构建组件之前，我们需要先导入一些关键的 JavaScript 库。这些库将帮助我们实现文件下载、ZIP 打包和文件保存功能。

bash 复制代码

npm install axios jszip file-saver --save

axios: 用于执行 HTTP 请求，并获取文件数据。
jszip: 用于在前端生成 ZIP 文件。
file-saver: 用于触发浏览器下载功能，保存生成的 ZIP 文件。

在 Vue 组件中，我们可以通过以下方式导入这些库：

javascript 复制代码

import axios from 'axios'
import JSZip from 'jszip'
import { saveAs } from 'file-saver'

3. 构建基础组件

我们从构建基础的 Vue 组件结构开始，该组件将接收文件列表和控制对话框的显示状态。

javascript 复制代码

<template>
  <div>
    <el-dialog :visible.sync="internalDialogVisible" title="Download Files">
      <el-progress v-for="(file, index) in downloadFiles"
                   style="margin-bottom: 10px;"
                   :key="index"
                   :percentage="file.progress"
                   :text-inside="true"
                   :stroke-width="26"
                   :format="formatProgress(file.name)">
      </el-progress>
      <el-progress :percentage="packProgress"
                   :stroke-width="26"
                   :text-inside="true"
                   status="success"
                   :format="formatPackingProgress">
      </el-progress>
    </el-dialog>
  </div>
</template>

4.实现文件下载与进度显示

在文件下载过程中，我们需要实时更新进度条，并显示文件的下载进度。为此，axios 提供了 onDownloadProgress 钩子，用于在下载过程中获取进度信息。

javascript 复制代码

const response = await axios.get(file.url, {
  responseType: 'blob',
  onDownloadProgress: (progressEvent) => {
    // 计算下载进度
    const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
    this.$set(this.downloadFiles, index, {
      ...file,
      progress
    })
  }
})

5. 打包文件为 ZIP

在所有文件下载完成后，我们将这些文件打包成 ZIP 格式。通过 JSZip 库，我们可以轻松实现文件打包，并使用 file-saver 来触发浏览器下载。

javascript 复制代码

async startDownload () {
  try {
    const zip = new JSZip()

    // 下载所有文件并添加到 zip 中
    const downloadPromises = this.downloadFiles.map(async (file) => {
      const response = await axios.get(file.url, {
        responseType: 'blob'
      })
      zip.file(file.name, response.data)
    })

    // 等待所有文件下载完成
    await Promise.all(downloadPromises)

    // 生成 zip 并触发下载
    zip.generateAsync({ type: 'blob' }).then((content) => {
      saveAs(content, this.zipName + '.zip')
      this.$emit('update:dialogVisible', false)
    })
  } catch (error) {
    console.error('Download failed:', error)
  }
}

6. 控制对话框的显示与隐藏

为了更好地控制对话框的显示与隐藏，我们在组件中使用 internalDialogVisible 作为内部控制变量，并通过 watch 监听 dialogVisible 的变化。当对话框打开时，我们启动下载流程，并在所有操作完成后关闭对话框。

javascript 复制代码

watch: {
  dialogVisible (newVal) {
    this.internalDialogVisible = newVal
    if (newVal) {
      this.downloadFiles = this.files.map(file => ({ ...file, progress: 0 }))
      this.packProgress = 0
      this.startDownload()
    }
  },
  internalDialogVisible (newVal) {
    this.$emit('update:dialogVisible', newVal)
  }
}

7. 可能会遇到的问题：处理跨域请求 (CORS)

在实现文件下载功能时，尤其是当我们从不同的域名或服务器请求文件资源时，可能会遇到跨域资源共享 (CORS) 问题。CORS 是一种浏览器安全机制，用于防止恶意网站在用户不知情的情况下发起跨域请求。因此，当我们的 Vue 应用从与其源不同的服务器请求资源时，浏览器会根据 CORS 规则来决定是否允许该请求。

7.1 什么是 CORS？

CORS (Cross-Origin Resource Sharing) 是浏览器和服务器之间的一种协议，用于控制哪些资源可以通过跨域 HTTP 请求被访问。它通过添加特定的 HTTP 头来告知浏览器资源是否可以被访问。

7.2 常见的 CORS 错误

当我们在实现文件下载时，如果服务器没有正确配置 CORS，我们可能会遇到以下错误：

Access to XMLHttpRequest at 'https://example.com/file' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这个错误说明目标服务器没有正确配置 Access-Control-Allow-Origin 头，导致浏览器阻止了该请求。

7.3 解决 CORS 问题的方法

服务器端配置：
- 在理想情况下，我们应当拥有对目标服务器的控制权，并在服务器端配置允许的跨域请求。具体方法是在服务器的响应头中添加 Access-Control-Allow-Origin，比如：
  http 复制代码
```
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
```
  这将允许所有来源的跨域请求。当然，我们也可以将 Access-Control-Allow-Origin 设置为特定的域名，以限制允许跨域访问的来源。
使用代理服务器：
- 如果我们无法控制目标服务器的配置，可以考虑在开发环境中使用代理服务器。通过 Vue CLI 我们可以轻松配置代理，将请求通过代理服务器发送，从而避免 CORS 问题。以下是 Vue CLI 中的 vue.config.js 配置示例：
  javascript 复制代码
```
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://example.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}
```
  通过这种配置，所有发往 /api 的请求都会被代理到 https://example.com，从而避免直接跨域请求导致的 CORS 问题。
使用 JSONP：
- JSONP (JSON with Padding) 是一种传统的跨域解决方案，主要用于 GET 请求。然而，由于它仅支持 GET 请求且具有安全风险，现代应用中较少使用。
启用 CORS 插件：
- 在开发环境中，为了临时解决 CORS 问题，可以使用浏览器插件如 CORS Unblock。不过，这只适用于开发和调试阶段，不推荐在生产环境中使用。

7.4 说明

CORS 问题是开发跨域资源请求时不可避免的挑战之一。在实现文件下载功能时，务必确保服务器配置正确的 CORS 头，以允许来自我们应用的请求。如果无法控制服务器配置，可以考虑使用代理服务器或其他临时解决方案。在生产环境中，最好的做法是从服务器端正确处理 CORS，以确保安全性和可靠性。

8. 完整源代码

javascript 复制代码

<template>
  <div>
    <el-dialog :visible.sync="internalDialogVisible"
               title="Download Files">
      <el-progress v-for="(file, index) in downloadFiles"
                   style="margin-bottom: 10px;"
                   :key="index"
                   :percentage="file.progress"
                   :text-inside="true"
                   :stroke-width="26"
                   :format="formatProgress(file.name)">
      </el-progress>
      <el-progress :percentage="packProgress"
                   :stroke-width="26"
                   :text-inside="true"
                   status="success"
                   :format="formatPackingProgress">
      </el-progress>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import JSZip from 'jszip'
import { saveAs } from 'file-saver'

export default {
  name: 'DownloadManager',
  props: {
    files: {
      type: Array,
      required: true
    },
    dialogVisible: {
      type: Boolean,
      required: true
    },
    zipName: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      internalDialogVisible: this.dialogVisible,
      downloadFiles: this.files.map(file => ({ ...file, progress: 0 })),
      packProgress: 0
    }
  },
  methods: {
    formatProgress (fileName) {
      return percentage => `${fileName} - ${percentage}%`
    },
    formatPackingProgress (percentage) {
      return `Packing Files - ${percentage}%`
    },
    async startDownload () {
      try {
        const zip = new JSZip()

        // 下载所有文件并添加到 zip 中
        const downloadPromises = this.downloadFiles.map(async (file, index) => {
          const response = await axios.get(file.url, {
            responseType: 'blob',
            onDownloadProgress: (progressEvent) => {
              // 计算下载进度
              const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
              this.$set(this.downloadFiles, index, {
                ...file,
                progress
              })
            }
          })
          zip.file(file.name, response.data)
        })

        // 等待所有文件下载完成
        await Promise.all(downloadPromises)

        // 生成 zip 并触发下载，同时更新打包进度
        zip.generateAsync({ type: 'blob' }, (metadata) => {
          this.packProgress = Math.round((metadata.percent))
        }).then((content) => {
          saveAs(content, this.zipName + '.zip')
          this.$emit('update:dialogVisible', false)
        })
      } catch (error) {
        console.error('Download failed:', error)
      }
    }
  },
  watch: {
    dialogVisible (newVal) {
      this.internalDialogVisible = newVal
      if (newVal) {
        this.downloadFiles = this.files.map(file => ({ ...file, progress: 0 }))
        this.packProgress = 0
        this.startDownload()
      }
    },
    internalDialogVisible (newVal) {
      this.$emit('update:dialogVisible', newVal)
    }
  }
}
</script>

9. 组件调用

要在外部调用这个组件，可以按照以下步骤操作：

9.1 引入并注册组件

在希望使用这个 DownloadManager 组件的地方引入它，并在父组件中注册。

假设在一个名为 App.vue 的组件中调用 DownloadManager：

javascript 复制代码

<template>
  <div>
    <!-- 其他内容 -->

    <!-- 使用 DownloadManager 组件 -->
    <DownloadManager
      :files="filesToDownload"
      :dialogVisible.sync="isDialogVisible"
      :zipName="zipFileName"
    />
    
    <!-- 触发下载对话框显示的按钮 -->
    <el-button @click="openDownloadDialog">Download Files</el-button>
  </div>
</template>

<script>
import DownloadManager from './components/DownloadManager.vue' // 根据实际路径调整

export default {
  components: {
    DownloadManager
  },
  data () {
    return {
      filesToDownload: [
        { name: 'file1.txt', url: 'https://example.com/file1.txt' },
        { name: 'file2.txt', url: 'https://example.com/file2.txt' }
      ],
      isDialogVisible: false,
      zipFileName: 'downloaded_files'
    }
  },
  methods: {
    openDownloadDialog() {
      this.isDialogVisible = true
    }
  }
}
</script>

9.2 组件参数以及解释

files: 传递一个文件数组，每个文件对象应包含 name 和 url 属性，用于下载文件。
dialogVisible: 控制 el-dialog 的可见性，使用 .sync 修饰符让父组件与子组件之间双向绑定。
zipName: 传递生成的 ZIP 文件名。

使用 DownloadManager 组件时，通过绑定属性 (:files, :dialogVisible.sync, :zipName) 来控制组件行为。

调用 openDownloadDialog 方法显示下载对话框，并开始下载文件。

总结

通过本文，我们学习了如何使用 Vue 创建一个带有进度显示和打包功能的文件下载组件。我们探讨了如何导入必要的包，构建组件的基础结构，实现文件下载与进度显示，以及如何将文件打包为 ZIP 格式供用户下载。这种组件不仅能提升用户体验，还能被复用于各种场景，为我们的项目增色不少。

我们可以根据具体需求进一步扩展这个组件，比如添加错误处理、取消下载等功能。