当前位置: 首页 > news >正文

vue实现批量下载文件流并压缩

为了实现文件流压缩,我们可以使用 JSZipFileSaver 这两个第三方库。JSZip 是一个用于创建、读取和编辑 .zip 文件的 JavaScript 库,而 FileSaver 则用于在客户端保存文件。

  • ‌JSZip‌:用于创建和操作zip文件。可以通过 file 方法将文件添加到zip中,通过 generateAsync
    方法生成zip文件。 ‌
  • ‌FileSaver‌:用于将生成的zip文件保存到本地。通过 saveAs 方法可以实现文件保存。

首先要安装插件

npm install jszip file-saver

然后,在Vue组件中编写代码实现文件流压缩功能。

<template><div><button @click="downloadZip">下载压缩包</button></div>
</template><script>
import JSZip from 'jszip';
import { saveAs } from 'file-saver';
import axios from 'axios';export default {methods: {async downloadZip() {const zip = new JSZip();// 下面是示例文件名,项目中改成勾选的数据const fileNames = ['file1.txt', 'file2.txt', 'file3.txt']; // 示例文件名const promises = fileNames.map(fileName => this.getFileAsStream(fileName).then(blob => {zip.file(fileName, blob);}));await Promise.all(promises);const content = await zip.generateAsync({ type: 'blob' });saveAs(content, '批量下载.zip');},async getFileAsStream(fileName) {// 这里假设你有一个后端接口可以返回文件流const response = await axios.get(`/path/to/your/api/${fileName}`, {responseType: 'arraybuffer' // 如果不行改成blob });const blob = new Blob([response.data], { type: 'application/octet-stream' });return blob;}}
};
</script>

相关文章:

vue实现批量下载文件流并压缩

为了实现文件流压缩&#xff0c;我们可以使用 JSZip 和 FileSaver 这两个第三方库。JSZip 是一个用于创建、读取和编辑 .zip 文件的 JavaScript 库&#xff0c;而 FileSaver 则用于在客户端保存文件。 ‌JSZip‌&#xff1a;用于创建和操作zip文件。可以通过 file 方法将文件添…...

前端入门之VUE--ajax、vuex、router,最后的前端总结

前言 VUE是前端用的最多的框架&#xff1b;这篇文章是本人大一上学习前端的笔记&#xff1b;欢迎点赞 收藏 关注&#xff0c;本人将会持续更新。本人不是学前端的&#xff0c;这个是大一的时候上学的和做的笔记&#xff0c;那个时候学的也蒙&#xff0c;故这里对前端做一个总…...

安装k8s涉及命令(方便放到txt离线使用)

查看操作系统信息 uname -a # 查看所有操作系统信息 uname -s # 查看内核名称 uname -r # 查看内核版本号 uname -m # 查看机器硬件名称 cat /etc/os-release # 查看所有操作系统信息 配置hosts cat >> /etc/hosts << EOF 172.171.16.147 crawler-k8s-mast…...

FLV视频封装格式详解

目录(?)[-] OverviewFile Structure The FLV headerThe FLV File BodyFLV Tag Definition FLVTAGAudio TagsVideo TagsSCRIPTDATA onMetaDatakeyframes Overview Flash Video(简称FLV),是一种流行的网络格式。目前国内外大部分视频分享网站都是采用的这种格式. File Structure…...

搭建vue3+vant项目架构

git代码仓库&#xff0c;直接下载压缩包使用 1、首先要安装node.js(18.3 或更高版本) 2、创建vue3项目 npm create vuelatest然后按照自己的需要进行选择就行 到此vue3项目创建完成&#xff0c;接下来是搭建项目架构 3、配置Vant (移动端ui) vue3项目引入vant&#xff0c…...

【Linux】进程间通信 -> 匿名管道命名管道

进程间通信的目的 数据传输&#xff1a;一个进程许需要将它的数据发送给另外一个进程。资源共享&#xff1a;多个进程之间共享同样的资源。通知事件&#xff1a;一个进程需要向另一个或一组进程发送消息&#xff0c;通知它们发生了某种事件&#xff08;如进程终止时要通知父进程…...

大数据开发学习路线

编程语言&#xff1a; Python&#xff1a;数据分析、数据预处理 Java&#xff1a;Hadoop和许多大数据工具的基础 Scala&#xff1a;用于Apache Spark数据库知识&#xff1a; SQL和NoSQL数据库的基本概念 数据库系统如MySQL、MongoDB等操作系统&#xff1a; Linux基础命令和脚本…...

华为云计算HCIE笔记05

第七章&#xff1a;其它模式 灾备组网 高可用性组网&#xff0c;单核心场景下&#xff0c;直接在两个站点中设置一个第三方仲裁站点&#xff0c;两个站点同时连接到仲裁&#xff0c;并且连接到对方。一旦出现问题&#xff0c;则由仲裁站点进行判断&#xff0c;进行业务切换 双核…...

wordpress网站用token登入开发过程

生成跳转token 示例&#xff1a; function generate_login_token($user_id, $secret_key) {$payload [user_id > $user_id,timestamp > time(),];$payload_json json_encode($payload);$signature hash_hmac(sha256, $payload_json, $secret_key);return base64_en…...

Python基础知识回顾

数据类型 Python可以区分整数&#xff08;integers、下文简写为int&#xff09;、浮点数&#xff08;float&#xff09;、字符串&#xff08;string&#xff09;和布尔值&#xff08;Boolean&#xff09;等数据类型。 1&#xff09;int是可正可负的整数 2&#xff09;float包…...

C++--------效率和表示

C 效率和表示 效率 时间效率&#xff1a;在 C 中&#xff0c;不同的数据结构和算法有着各异的时间复杂度。例如&#xff0c;访问数组元素的时间复杂度是 O ( 1 ) O(1) O(1)&#xff0c;而遍历链表查找元素的时间复杂度最坏情况下是 O ( n ) O(n) O(n)。选择合适的算法与数据…...

在 Ubuntu 服务器上添加和删除用户

在 Ubuntu 服务器上添加和删除用户通常使用命令行工具&#xff0c;如 adduser、useradd、deluser 等。以下是详细的步骤和说明&#xff1a; 添加用户 使用 adduser 命令 adduser 是一个更为友好的脚本&#xff0c;用于创建新用户并设置相关信息。 添加新用户 sudo adduser 用…...

安卓 SystemServer 启动流程

目录 引言 Android系统服务启动顺序 zygote fork SystemServer 进程 SystemServer启动流程 1、SystemServer.main() 2、SystemServer.run() 3、初始化系统上下文 4、创建系统服务管理 5、启动系统各种服务 总结 引言 开机启动时 PowerManagerService 调用 AudioSer…...

深度分析 es multi_match 中most_fields、best_fields、cross_fields区别

文章目录 1. multi_match 查询的类型1.1 best_fields&#xff08;默认&#xff09;1.2 most_fields1.3 cross_fields 2. 不同类型的示例查询示例数据&#xff1a; 3. 示例 1: 使用 best_fields查询&#xff1a;说明&#xff1a; 4. 示例 2: 使用 most_fields查询&#xff1a;说…...

中职计算机网络技术理实一体化实训室建设方案

构建理实一体化教学模式对于改善中等职业学校计算机网络技术课程的教学现状、提升教学质量和效率具有重要意义。在中职教育不断深化改革的背景下&#xff0c;积极推进理实一体化教学模式的发展&#xff0c;不仅能够提高计算机网络技术课程的教学水平&#xff0c;满足教育改革的…...

Java技术专家视角解读:SQL优化与批处理在大数据处理中的应用及原理

引言 在大厂架构中&#xff0c;提升系统性能和稳定性是技术团队的首要任务。SQL优化与批处理作为两大关键技术手段&#xff0c;对于处理大规模数据和高并发请求具有重要意义。本文将从Java技术专家的视角出发&#xff0c;深入探讨SQL优化与批处理在大数据处理中的应用及原理&a…...

数据结构(Java版)第六期:LinkedList与链表(一)

目录 一、链表 1.1. 链表的概念及结构 1.2. 链表的实现 专栏&#xff1a;数据结构(Java版) 个人主页&#xff1a;手握风云 一、链表 1.1. 链表的概念及结构 链表是⼀种物理存储结构上⾮连续存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的引⽤链接次序实现的。与火车…...

云边端一体化架构

云边端一体化架构是一种将云计算、边缘计算和终端设备相结合的分布式计算模型。该架构旨在通过优化资源分配和数据处理流程&#xff0c;提供更高效、更低延迟的服务体验。 下面是对这个架构的简要说明&#xff1a; 01云计算&#xff08;Cloud Computing&#xff09; — 作为中心…...

人工智能之基于阿里云进行人脸特征检测部署

人工智能之基于阿里云进行人脸特征检测部署 需求描述 基于阿里云搭建真人人脸68个关键点检测模型&#xff0c;模型名称&#xff1a;Damo_XR_Lab/cv_human_68-facial-landmark-detection使用上述模型进行人脸关键点识别&#xff0c;模型地址 业务实现 阿里云配置 阿里云配置…...

基于高云GW5AT-15 FPGA的SLVS-EC桥MIPI设计方案分享

作者&#xff1a;Hello,Panda 一、设计需求 设计一个4Lanes SLVS-EC桥接到2组4lanes MIPI DPHY接口的电路模块&#xff1a; &#xff08;1&#xff09;CMOS芯片&#xff1a;IMX537-AAMJ-C&#xff0c;输出4lanes SLVS-EC 4.752Gbps Lane速率&#xff1b; &#xff08;2&…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

MySQL:分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...