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>
- 运行项目：在浏览器中打开 Vue 项目，点击“下载附件压缩包”按钮，即可下载包含多个附件的压缩文件。
注意事项
- 确保你有访问这些文件 URL 的权限，因为浏览器的同源策略可能会限制跨域请求。如果遇到跨域问题，可以在服务器端进行代理请求。
- 此示例假设文件 URL 是有效的，并且服务器能够正常响应请求。如果文件 URL 无效或服务器出现问题，可能会导致下载失败。
相关文章：
Vue.js组件开发-实现多个文件附件压缩下载
在 Vue 项目中实现多个附件压缩下载，可以借助 jszip 库来创建压缩文件，以及 file-saver 库来保存生成的压缩文件。 步骤 1：安装依赖 首先，在 Vue 项目中安装 jszip 和 file-saver： npm install jszip file-saver步骤…...
基于dlib/face recognition人脸识别推拉流实现
目录 一.环境搭建 二.推拉流代码 三.人脸检测推拉流 一.环境搭建 1.下载RTSP服务器MediaMTX与FFmpeg FFmpeg是一款功能强大的开源多媒体处理工具，而MediaMTX则是一个轻量级的流媒体服务器。两者结合，可以实现将本地视频或者实时摄像头画面推送到RTSP流，从而实现视频…...
qt QNetworkRequest详解
1、概述 QNetworkRequest是Qt网络模块中的一个核心类，专门用于处理网络请求。它封装了网络请求的所有关键信息，包括请求的URL、HTTP头部信息等，使得开发者能够方便地在Qt应用程序中执行网络操作，如文件下载、网页内容获取等。QNe…...
uvm timeout的哪些事
如下图所示，设置timeout并未生效，原因多了一个空格，坑 进一步分析，默认是overidable的 是否加括号呢，如下所示，这两个造型都可以，中间有空格也行 那么，我加上单位可以吗，…...
JavaScript赋能智能网页设计
构建AI驱动的实时风格迁移系统 案例概述 本案例将实现一个基于深度学习的实时图像风格迁移系统，通过浏览器端神经网络推理实现以下高级特性： WebAssembly加速的ONNX模型推理 WebGL Shader实现的风格混合算法 WebRTC实时视频流处理 基于Web Workers的…...
全面了解 Web3 AIGC 和 AI Agent 的创新先锋 MelodAI
不管是在传统领域还是 Crypto，AI 都是公认的最有前景的赛道。随着数字内容需求的爆炸式增长和技术的快速迭代，Web3 AIGC（AI生成内容）和 AI Agent（人工智能代理）正成为两大关键赛道。 AIGC 通过 AI 技术生成…...
leetcode_链表 234.回文链表
234.回文链表 给你一个单链表的头节点head，请你判断该链表是否为回文链表。如果是, 返回 true ; 否则, 返回false。思路： 找到中间节点(快慢指针法)反转后半部分的链表比较前半部分和后半部分链表 # Definition for singly-linked list. # class List…...
cloc下载和使用
cloc（Count Lines of Code）是一个跨平台的命令行工具，用于计算代码行数。以下是下载和使用 cloc 的步骤： 下载 cloc 对于 Windows 用户： 访问 cloc 的 GitHub 仓库：https://github.com/AlDanial/cloc在 …...
在 Windows 系统上，将 Ubuntu 从 C 盘 迁移到 D 盘
在 Windows 系统上，如果你使用的是 WSL（Windows Subsystem for Linux）并安装了 Ubuntu，你可以将 Ubuntu 从 C 盘 迁移到 D 盘。迁移过程涉及导出当前的 Ubuntu 发行版，然后将其导入到 D 盘的目标目录。以下是详细的步骤…...
【Redis】Redis入门以及什么是分布式系统{Redis引入+分布式系统介绍}
文章目录 介绍redis的引入 分布式系统单机架构应用服务和数据库服务分离【负载均衡】引入更多的应用服务器节点 单机架构 分布式是什么 数据库分离和负载均衡 理解负载均衡 数据库读写分离 引入缓存 数据库分库分表 引入微服务 介绍 The open source, in-memory data store us…...
wow-agent---task4 MetaGPT初体验
先说坑： 1.使用git clone模式安装metagpt 2.模型尽量使用在线模型或本地高参数模型。 这里使用python3.10.11调试成功 一，安装 安装 | MetaGPT，参考这里的以开发模型进行安装 git clone https://github.com/geekan/MetaGPT.git cd /you…...
Leetcode::3432. 统计元素和差值为偶数的分区方案
3432. 统计元素和差值为偶数的分区方案 已解答 简单 相关企业 提示 给你一个长度为 n 的整数数组 nums 。 分区 是指将数组按照下标 i （0 < i < n - 1）划分成两个 非空 子数组，其中： 左子数组包含区间 [0, i] 内的所…...
linux如何修改密码,要在CentOS 7系统中修改密码
要在CentOS 7系统中修改密码，你可以按照以下步骤操作： 步骤 1: 登录到系统 在登录提示符 localhost login: 后输入你的用户名。输入密码并按回车键。 步骤 2: 修改密码 登录后，使用 passwd 命令来修改密码： passwd 系统会提…...
GIS与相关专业软件汇总
闲来无事突然想整理一下看看 GIS及相关领域 究竟有多少软件或者工具包等。 我询问了几个AI工具并汇总了一个软件汇总，不搜不知道，一搜吓一跳，搜索出来了大量的软件，大部分软件或者工具包都没有见过，不知大家还有没有要…...
云计算架构学习之LNMP架构部署、架构拆分、负载均衡-会话保持
一.LNMP架构部署 1.1. LNMP服务搭建 1.磁盘信息 2.内存 3.负载信息 4.Nginx你们公司都用来干嘛 5.文件句柄(文件描述符 打开文件最大数量) 6.你处理过系统中的漏洞吗 SSH漏洞 7.你写过什么shell脚本 8.监控通过什么告警 zabbix 具体监控哪些内容 9.mysql redis查询 你好H…...
mamba论文学习
rnn 1986 训练速度慢 testing很快 但是很快就忘了 lstm 1997 训练速度慢 testing很快 但是也会忘（序列很长的时候） GRU实在lstm的基础上改进，改变了一些门 transformer2017 训练很快，testing慢些，时间复杂度高&am…...
uva 1354 Mobile Computing
原题： 房间中有一个天平，房间的宽度为r，有s个砝码，每个砝码的重量是 w i w_i wi。设计一个尽量宽，但是宽度不能超过r的天平，挂住所有砝码。天平全部由长度为1的木棍组成，木棍的每一端要么挂一…...
理解C++中的右值引用
右值引用，顾名思义，就是对一个右值进行引用，或者说给右值一个别名。右值引用的规则和左值一用一模一样，都是对一个值或者对象起个别名。 1. 右值引用和左值引用一样，在定义的同时必须立即赋值，如果不立即赋…...
约数个数（简单）
给定 nn 个正整数 aiai，请你输出这些数的乘积的约数个数，答案对 10971097 取模。 输入格式 第一行包含整数 nn。 接下来 nn 行，每行包含一个整数 aiai。 输出格式 输出一个整数，表示所给正整数的乘积的约数个数，答…...
Day33：字符串的切片
在 Python 中，**切片（Slicing）**是对字符串（以及其他序列类型，如列表、元组等）进行提取部分内容的强大工具。通过切片，你可以非常方便地提取字符串的子字符串、倒序字符串，甚至进行步…...
基于回归分析法的光伏发电系统最大功率计算simulink建模与仿真
目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于回归分析法的光伏发电系统最大功率计算simulink建模与仿真。选择回归法进行最大功率点的追踪，使用光强和温度作为影响因素，电压作为输出进行建模。…...
redis离线安装部署详解（包括一键启动）
像上文一样 因为在学习的过程中没有查到一个详细的离线部署方案 所以在自己学习之后想要自己写一个文章 希望可以帮助后续学习redis离线部署的朋友少走一线弯路 首先就是下载安装包 可以自己在本地下载再传到机器上（通过xftp或lrzsz都可） http://d…...
Coze插件开发之基于已有服务创建并上架到扣子商店
Coze插件开发之基于已有服务创建并上架到扣子商店 在应用开发中，需要调用各种插件，以快速进行开发。但有时需要调用的插件在扣子商店里没有，那怎么办呢？ 今天就来带大家快速基于已有服务创建一个新的插件 简单来讲，就是…...
【Unity】 HTFramework框架（五十九）快速开发编辑器工具（Assembly Viewer + ILSpy）
更新日期：2025年1月23日。 Github源码：[点我获取源码] Gitee源码：[点我获取源码] 索引 开发编辑器工具MouseRayTarget焦点视角Collider线框Assembly Viewer搜索程序集ILSpy反编译程序集搜索GizmosElement类找到Gizmos菜单找到Gizmos窗口分析A…...
【Linux】统计文本中每行指定位置出现的字符串的次数
统计文本中每行指定位置出现的字符串的次数 假定情景 某些项目，会把某个特定事件记录到Log中并且落盘（保持到硬盘）。基于落盘后的日志，要统计这些日志里产生该特定事件的次数 统计脚本 可以写一个sh脚本，来解析某个…...
牛客周赛round78 B,C
B.一起做很甜的梦 题意：就是输出n个数（1-n），使输出的序列中任意选连续的小序列（小序列长度>2&&<n-1）不符合排列（例如如果所选长度为2，在所有长度为2 的小序列里不能出…...
【DB】Oracle存储过程
目录 什么是存储过程？ 为什么要使用存储过程？ 创建存储过程 无参存储过程语法： 带参存储过程语法： 带有输入参数的存储过程 带有输出参数的存储过程 带有输入输出参数的存储过程 带有异常处理的存储过程 存储过程中游标…...
亚博microros小车-原生ubuntu支持系列：14雷达跟踪与雷达守卫
背景知识 激光雷达的数据格式参见： 亚博microros小车-原生ubuntu支持系列：13 激光雷达避障-CSDN博客 本节体验雷达跟踪跟守卫 PID控制 从百度百科摘一段介绍 比例积分微分控制（proportional-integral-derivative control）&am…...
c++迷宫问题(migong）
今天的题目叫“迷宫问题(migong）”，是“DFS深度优先搜索 递归”一类的。 题目描述 设有一个N*N(2<N<10)方格的迷宫，入口和出口分别在左上角和右上角。迷宫格子中 分别放0和1，0表示可通，1表示不能，入…...
)
深度学习项目--基于LSTM的糖尿病预测探究(pytorch实现)
🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者：K同学啊 前言 LSTM模型一直是一个很经典的模型，一般用于序列数据预测，这个可以很好的挖掘数据上下文信息，本文将使用LSTM进行糖尿病…...
Java Swing 基础组件详解 [论文投稿-第四届智能系统、通信与计算机网络]
大会官网：www.icisccn.net Java Swing 是一个功能强大的 GUI 工具包，提供了丰富的组件库用于构建跨平台的桌面应用程序。本文将详细讲解 Swing 的基础组件，包括其作用、使用方法以及示例代码，帮助你快速掌握 Swing 的核心知识。 一…...
深圳大学-智能网络与计算-实验三：网络容量优化分析实验
实验目的与要求 了解什么是凸优化问题；学会使用 Matlab CVX 工具箱解决最优功率分配问题，使得信道容量最大化；了解注水算法； 方法，步骤 深入理解最优功率分配问题。使用 CVX 找出最优的功率分配。使用凸优化数学分析…...
嵌入式基础 -- PCIe 控制器中断管理之MSI与MSI-X简介
PCIe 控制器中断管理技术文档 1. 背景 在现代计算机系统中，中断是设备与 CPU 通信的重要机制，PCIe 控制器提供了从传统线中断到基于消息的中断（MSI/MSI-X）的演进，以提升中断处理效率和可扩展性。x86 和 ARM 架构虽然…...
Android-okhttp详解
目录 一，介绍 二，简单使用 三，流程分析 四，分发器 五，拦截器 5.1 重试及重定向拦截器 5.1.1 重试 5.1.2 重定向 5.2 桥接拦截器 5.3 缓存拦截器 5.4 连接拦截器 5.5 请求服务器拦截器 一，介绍 OkHttp是当下…...
CNN-BiLSTM卷积双向长短期记忆神经网络时间序列预测（Matlab完整源码和数据）
CNN-BiLSTM卷积双向长短期记忆神经网络时间序列预测（Matlab完整源码和数据） 目录 CNN-BiLSTM卷积双向长短期记忆神经网络时间序列预测（Matlab完整源码和数据）预测效果基本介绍 CNN-BiLSTM卷积双向长短期记忆神经网络时间序列预测一…...
数字图像处理：实验七
uu们！这是我们目前数字图像系列的最后一张，之后有关人工智能结合的数字图像处理咸鱼哥正在学习和创作中，所以还请大家给咸鱼哥点时间，同时也提前预祝大家2025年新春快乐！（咸鱼哥真诚的祝愿每一个人…...
Excel分区间统计分析（等步长、不等步长、多维度）
在数据分析过程中，可能会需要统计不同数据区间的人数、某个数据区间的平均值或者进行分组区间统计，本文从excel函数到数据透视表的方法，从简单需求到复杂需求，采用不同的方法进行讲解，尤其是通过数据透视表的强大功能大…...
QWindow类使用介绍与代码演示
深入浅出C++ Qt开发技术专栏 https://blog.csdn.net/yao_hou/category_9276099.html?spm=1001.2014.3001.5482 文章目录 QWindow主要功能和特性常用的函数示例代码适用场景QWindow父类QSurface`QSurface` 类概述主要功能和特性常用的函数相关的子类示例代码`QSurface` 的实际应…...
函数——详解)
OpenCV图像显示imshow()函数——详解
OpenCV图像显示imshow()函数——详解 本文目录： 零、时光宝盒 一、OpenCV 图像显示使用imshow()函数语法 二、imshow()显示图片时发生图片显示不全的解决方法 解决办法（1） 解决办法（2） 总结 三、imshow()图像显…...
Oracle 12c 中的 CDB和PDB的启动和关闭
一、简介 Oracle 12c引入了多租户架构，允许一个容器数据库（Container Database, CDB）托管多个独立的可插拔数据库（Pluggable Database, PDB）。本文档旨在详细描述如何启动和关闭CDB及PDB。 二、容器数据库 (CDB) 2.1…...
二次封装的方法
二次封装 我们开发中经常需要封装一些第三方组件，那么父组件应该怎么传值，怎么调用封装好的组件原有的属性、插槽、方法，一个个调用虽然可行，但十分麻烦，我们一起来看更简便的方法。 二次封装组件，属性怎…...
【BQ3568HM开发板】如何在OpenHarmony上通过校园网的上网认证
引言 前面已经对BQ3568HM开发板进行了初步测试，后面我要实现MQTT的工作，但是遇到一个问题，就是开发板无法通过校园网的认证操作。未认证的话会，学校使用的深澜软件系统会屏蔽所有除了认证用的流量。好在我们学校使用的认证系统和…...
安装Ubuntu22.04
1.引用教程 如何安装Ubuntu Server 22.04 LTS_ubuntu22.04 server-CSDN博客 2.空间分配 要使用 docker 比较多所以分别的 docker 空间大...
Charles 4.6.7 浏览器网络调试指南：流量过滤与分析（六）
1. 概述 在网络调试和优化过程中，Charles 不仅可以实现简单的网络抓包操作，还支持更高级的抓包技巧和流量分析功能。这些功能能够帮助开发者深入挖掘网络请求的细节，为复杂问题提供有效的解决方案。本文将重点讲解 Charles 的过滤规则、自定…...
浅拷贝（Shallow Copy）和深拷贝（Deep Copy）
浅拷贝（Shallow Copy）和深拷贝（Deep Copy）是对象复制的两种方式，它们在处理对象内部引用类型成员时有不同的行为。下面我将详细解释这两种拷贝的区别，并提供具体的 Java 示例代码。 浅拷贝（Shal…...
解决双系统引导问题：Ubuntu 启动时不显示 Windows 选项的处理方法
方法 1：检查 GRUB 引导菜单是否隐藏 启动进入 Ubuntu 系统。打开终端，输入以下命令编辑 GRUB 配置文件：sudo nano /etc/default/grub检查以下配置项： GRUB_TIMEOUT0：如果是 0，将其改为一个较大的值&#x…...
宏_wps_宏修改word中所有excel表格的格式_设置字体对齐格式_删除空行等
需求： 将word中所有excel表格的格式进行统一化，修改其中的数字类型为“宋体， 五号，右对齐， 不加粗，不倾斜”，其中的中文为“宋体， 五号， 不加粗，不倾斜” 数…...
行政办公管理系统的需求设计和实现
前言： 总裁办/综合部，作为综合行政管理部门服务于整个公司，工作职责包含从最基础的行政综合到协调督办、对外政务、品牌建设等等，工作量繁多而且琐碎。如何通过信息化来实现标准化和常态化的管理手段，确保总裁办的各项…...
996引擎 - NPC-动态创建NPC
996引擎 - NPC-动态创建NPC 创建脚本服务端脚本客户端脚本参考资料有个小问题，创建NPC时没有控制朝向的参数。所以。。。自己考虑怎么找补吧。 创建脚本 服务端脚本 Mir200\Envir\Market_Def\test\test001-3.lua -- NPC入口函数 function main(player)-- 获取玩家的用户名…...
HTML＜hgroup＞标签
例子： 使用hgroup元素标记标题和段落是相关的： <hgroup> <h2>Norway</h2> <p>The land with the midnight sun.</p> </hgroup> 定义和用法： 标签<hgroup>用于包围标题和一个或多个<p&g…...