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

已于 2024-08-14 16:34:05 修改
阅读量1.1k 收藏 18
点赞数 34
分类专栏： # Element UI Vue 文章标签： vue.js 前端 javascript
于 2024-08-14 12:12:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31463571/article/details/141176557
版权

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

文章目录

前言

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

1. 组件功能概述

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

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

2. 导入所需的包

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

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

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

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

3. 构建基础组件

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

<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 钩子，用于在下载过程中获取进度信息。

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 来触发浏览器下载。

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 的变化。当对话框打开时，我们启动下载流程，并在所有操作完成后关闭对话框。

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 问题的方法

  1. 服务器端配置：

    • 在理想情况下，我们应当拥有对目标服务器的控制权，并在服务器端配置允许的跨域请求。具体方法是在服务器的响应头中添加 Access-Control-Allow-Origin，比如：
      Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
      这将允许所有来源的跨域请求。当然，我们也可以将 Access-Control-Allow-Origin 设置为特定的域名，以限制允许跨域访问的来源。

  2. 使用代理服务器：

    • 如果我们无法控制目标服务器的配置，可以考虑在开发环境中使用代理服务器。通过 Vue CLI 我们可以轻松配置代理，将请求通过代理服务器发送，从而避免 CORS 问题。以下是 Vue CLI 中的 vue.config.js 配置示例：
      module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://example.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}
      通过这种配置，所有发往 /api 的请求都会被代理到 https://example.com，从而避免直接跨域请求导致的 CORS 问题。

  3. 使用 JSONP：

    • JSONP (JSON with Padding) 是一种传统的跨域解决方案，主要用于 GET 请求。然而，由于它仅支持 GET 请求且具有安全风险，现代应用中较少使用。

  4. 启用 CORS 插件：

    • 在开发环境中，为了临时解决 CORS 问题，可以使用浏览器插件如 CORS Unblock。不过，这只适用于开发和调试阶段，不推荐在生产环境中使用。

7.4 说明

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

8. 完整源代码

<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：

<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 格式供用户下载。这种组件不仅能提升用户体验，还能被复用于各种场景，为我们的项目增色不少。

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

吾家有猫名探花
关注
专栏目录
12 使用Vue+Vue-router+el-menu实现菜单功能实战
xingyu_qie的专栏
04-10 8237
我们将继续维护添加Vue-router的路由数据,借助ElementUI的el-munu组件，来实现左侧菜单功能的实战，并自己实现一个el-menu组件
如何实现文件下载进度条呢？
猿小白的博客
09-14 1859
比如有时候我们在利用python下载文件的时候，通常情况下，文件下载过程我们是感知不到的，只有等文件下载完成，我们才能知道，该文件已经下载完成，假如此时下载文件很大，下载时间就会比较漫长，如果这时候有一个下载进度条，那就太好了，在此封装一个文件下载进度条工具方法，拿来即用。 目录 1、程序源码 2、运行展示 1、程序源码 #!/usr/bin/python # -*- coding: UTF-8 -*- """ @author: Roc-xb """ import requests i...
el-upload上传组件，实现单个上传，批量上传，进度条显示，自定义上传文件样式
dnswek的博客
08-22 7003
最近项目中涉及很多文件上传的地方，然后文件上传又有很多限制。比如文件大小限制，文件个数限制，文件类型限制，文件上传后的列表样式自定义，包括上传进度条等问题。下面是我对element-ui的上传组件的一些改造， 点击查看源码。 我是自己维护了一个列表数据，再对这个列表数据进行一些操作，没用组件自带的。先看看我的组件模版 <template> <el-upload cla...
vue +pdfkit+wkhtmltopdf导出pdf
会一点前端、会一点Java、会一点Python
08-26 2446
一、样式问题 1、使用vue+elementui时，发现有一些组件并不能导出pdf，只能使用传统html和css布局，这样导出的pdf更清晰 2、需要将css集中放到模板文件中，然后将选择的导出模块替换到模板中 二、导出table，换页时表头重复问题 解决办法： thead { display: table-row-group;// 使用thead默认每页都显示表头 } 三、实现部分 后端 模板export_file.txt： EXPORT_FILE = os.
yii2+elementUI2+uni-app使用小结
sjg20010414的专栏
05-27 803
yii2 应用与git设置 我们在 advanced 模板基础上多了 api 这个app 5个应用与目录结构 5个应用如下 common 我实际使用的就是2个目录：config 和 models config bootstrap.php 这是启动时必须加载的，注意我们多了别名 @api的设置 Yii::setAlias('@api', dirname(dirname(__DIR__)).'/api'); codeception-local.php、test.php、test-local.ph
前端大文件下载（带进度条）
weixin_42682011的博客
01-29 1万+
前端大文件下载（带进度条）1.需求背景2.需求分析：3.实现方式4.实现方式解析1.递归调用接口获取数据流（base64/blob）,我这里后端接口返回的是base64;2.后端对文件进行切片处理，接口返回流数据和总切片数以及当前的切片索引，前端进行进度计算，和流数据整合；3.注意，不能对接收的base64数据流直接字符串拼接，否则会报错(Invalid string length)，字符串长度超过了 JS 引擎的限制，那么这个长度限制到底是多少呢？根据搜索到的结果，V8 引擎支持的字符串长度为 2 的 2
FileSaver.js 实现浏览器端文件保存的JavaScript 库
11-04
FileSaver.js 实现了在本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器支持文件保存。FileSaver.js 在客户端保存文件的解决方案，并且可以让 Web 应用完美的生成文件, 或者保存不应该发送到外部服务器的一些敏感信息。是一种简单易用实现的利用 JavaScript/JS 在浏览器端保存文件的方案。
vue 使用 file-saver 实现下载功能
weixin_42684880的博客
08-27 5338
需求：将从后台获取的字符串，变成一个txt文件下载下来。 首先下载 file-saver 包 npm install file-saver --save let content = '下载内容包括特殊字符*&……%￥#@！试验' let blob = new Blob([content], { type: 'text/plain;charset=utf-8' }) saveAs(blob, + '下载名字.txt') 如果需要换行，或者添加title，在你取回来数据时，
js的FileSaver.saveAs()方法:监听保存进度，进度条等方法
程小博衍的博客
08-11 4694
js的fileSaver方法的使用，保存进度/进度条获取
08 使用Vue+vue-router+路由守卫实现路由鉴权功能实战
xingyu_qie的专栏
03-26 4827
本文主要是router的拆分，通过进行路由守卫进行用户路由的鉴权控制，还包含了404页面的实现，el-button的自研实现
文件导出FileSaver.js
03-02
用来把文件下载保存到本地的。需要的人自然会懂
Vue.js与ElementUI的结合开发：实战指南
# 第一章：Vue.js与ElementUI简介 ## 1.1 Vue.js简介 Vue.js是一套构建用户界面的渐进式框架，其核心库只关注视图层，易于上手，同时便于与第三方库或既有项目整合。Vue.js的目标是通过尽可能简单的 API 实现响应...
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 6930
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
两小时从零学会vue-admin-template框架
drhrht的博客
03-06 6673
一、vue-admin-template 1.项目简介 官网：https://github.com/PanJiaChen vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型项目，内部的架构非常的完善，简单易上手。 1.2下载项目 vue-element-admin 官网 vue-admi
Vue：a标签点击和file-saver/FileSaver.js实现文件下载
彭世瑜的博客
12-30 1万+
/ 存在浏览器兼容性。//释放掉blob对象。//下载完成移除元素。
FileSaver.js下载图片
热门推荐
sinat_41747081的博客
07-16 2万+
版权声明：本文为博主原创文章，未经博主允许不得转载。 第一步：引入FileSaver.js <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script> 第二步： HTML： <button onclick="download()">下载</but...
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 391
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
Vue Router push方法的使用
最新发布
ithongchou的博客
09-13 708
是一个用于编程式导航的方法，它可以将用户导航到应用中的不同路由。它提供了灵活的路由控制能力，允许你在应用的逻辑中进行路由操作，例如在用户交互后进行页面跳转。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值