vue前端实现多个url下载并合并为zip文件

news2024/11/23 23:43:30

一、安装

npm install jszip
npm install file-saver

二、引入

import axios from 'axios'
import JSZip from "jszip";
import FileSaver from "file-saver";

三、核心代码

videoData:['/video/26519f026fc012521605563015227403.mp4','/video/f7b9cdae14ad51e491b62742f71c43e7.mp4','/video/1f82d79e0a9ef414419275a5f1d6bb94.mp4'],



download1(){
        var videoData = this.videoData;
        const zip = new JSZip();
        var promises = [];
        videoData.forEach(item => {
          const promise = this.getFile(item).then(data => {
            const arr_name = item.split("/");
            const file_name = arr_name[arr_name.length - 1]; // 获取文件名
            console.log(data)
            zip.file(file_name, data, { binary: true });
          });
          promises.push(promise);
        });
        Promise.all(promises).then(() => {
          console.log("全部下载完成");
          zip.generateAsync({ type: "blob" }).then(content => {
            // 生成二进制流
            console.log("生成压缩包");
            FileSaver.saveAs(content, "时间戳.zip");
          });
        });
      },
      getFile(url){
        return new Promise((resolve, reject) => {
          axios({
            method: "get",
            url:url,
            responseType: "blob"
          })
            .then(data => {
              resolve(data.data);
            })
            .catch(error => {
              reject(error.toString());
            });
        });
      },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1180121.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

聊聊芯片超净间的颗粒(particle)

在芯片制造领域,颗粒的存在可能对生产过程产生巨大影响。其中,每个微小的颗粒,无论是来自人员、设备,还是自然环境,都有可能在制程中引发故障,从而对产品性能产生负面影响。这就是为什么在芯片厂中&#xf…

【日积月累】SpringBoot 通过注解@CacheConfig @Cacheable @CacheEvict @CachePut @Caching使用缓存

目录 1.前言2.引入依赖3.启动类加入注解EnableCaching4.常用注解4.1CacheConfig4.2Cacheable4.3CacheEvict4.4CachePut4.5Caching 5.总结6.参考 文章所属专区 日积月累 1.前言 Spring在3.1版本,就提供了一条基于注解的缓存策略,实际使用起来还是很丝滑…

【内功修炼】详解函数栈帧的创建和销毁

文章目录 1. 什么是函数栈帧2. 理解函数栈帧能解决什么问题呢?3. 函数栈帧的创建和销毁解析3.1 什么是栈?3.2 认识相关寄存器和汇编指令常见寄存器常用汇编指令 3.3 详解函数栈帧的创建和销毁3.3.1 函数的调用堆栈(main函数也是被其它函数调用…

手握“发展密钥”,TCL科技或迎价值重估?

在高度竞争且快速变化的泛半导体产业,每一次周期性或结构性的变化,都会对企业经营策略带来深远的影响。 2023年前三季度,泛半导体产业迎来结构性复苏。其中,主流显示领域供需关系趋向健康化,半导体显示行业整体上量价…

C语言 每日一题 PTA 11.7 day13

1.求e的近似值 自然常数 e 可以用级数 1 1 / 1! 1 / 2! ⋯ 1 / n! ⋯ 来近似计算。 本题要求对给定的非负整数 n&#xff0c;求该级数的前 n 1 项和。 代码实现 #include<stdio.h> void main() {int a, i, j; double b 1; double c 1;printf("请输入一个数\n…

零信任安全:构建无懈可击的网络防护体系

随着网络技术的飞速发展&#xff0c;信息安全问题日益凸显&#xff0c;传统的安全防护手段已经无法满足复杂多变的安全需求。在此背景下&#xff0c;零信任安全模型逐渐受到广泛关注。本文将探讨零信任安全的概念、优势以及如何构建无懈可击的网络防护体系。 一、零信任安全概念…

Go语言用Colly库编写的图像爬虫程序

下面是一个使用Colly库编写的Go语言图像爬虫程序&#xff0c;该程序会爬取news.qq上的图片&#xff0c;并使用proxy_host:duoip和proxy_port:8000的爬虫IP服务器进行抓取。 package mainimport ("fmt""net/http""github.com/crawlab-collective/go-co…

511-0101-08B 5136-PFB-VME DCS是工厂级数字化的核心

511-0101-08B 5136-PFB-VME DCS是工厂级数字化的核心 在一个预计到2023年全球将达到174亿美元的不断增长的市场中&#xff0c;行业分析公司ARC Advisory Group的一份市场分析报告证实&#xff0c;ABB将其在分布式控制系统(DCS)市场的份额增加到20.0%&#xff0c;保持了其在20世…

木牛第三代4D成像雷达,为高速/城市级NOA的普及化提速

为助力中国汽车行业高速、高质量的发展&#xff0c;推动中国汽车行业智能化向纵深发展&#xff0c;由《证券日报》社与江西省金融控股集团主办、轩元资本与江西省金控投资集团协办的“2023汽车资本论坛”于2023年10月27日在江西南昌举办&#xff0c;本次论坛指导单位为中国经济…

那些年遇到过的问题与解决方案

目录 一、当我们想进行数据回显并且只是让用户查看信息不能编辑时&#xff0c;置灰处理 二、多选框初始化加载问题 三、时间处理 获取当前年月日 时间自定义格式化 时间脱敏处理&#xff0c;去掉秒 四、input输入框处理 input输入框设定为只能输入0与正整数 刚进页面…

macOS磁盘分区调整软件--Paragon Camptune X 中文

Paragon Camptune X是一款专为Mac用户设计的强大分区大小调整工具。通过它&#xff0c;用户可以简便地调整Mac硬盘上的分区大小&#xff0c;实现存储空间的高效管理。无论是需要在Mac和Windows系统之间切换的双系统用户&#xff0c;还是有其他特定存储需求的用户&#xff0c;Ca…

携手创新算网应用:英特尔助力中国移动“算启新程”

10月11日&#xff0c;以“算启新程 智享未来”为主题的2023中国移动全球合作伙伴大会在中国广州保利世贸博览馆拉开帷幕。 大会围绕“CT、IT、DT技术融合”、“连接、算力、能力服务融合”、“新一代信息技术与生产、生活、治理应用融合”三个融合&#xff0c;聚焦科技创新、行…

(11_06)函数计算 FC 3.0 发布,全面降价,最高幅度达93%,阶梯计费越用越便宜

作为国内最早布局 Serverless 的云厂商之一&#xff0c;阿里云在 2017 年推出函数计算 FC&#xff0c;开发者只需编写代码并上传&#xff0c;函数计算就会自动准备好相应的计算资源&#xff0c;大幅简化开发运维过程。阿里云函数计算持续在 Serverless GPU 方面投入研发&#x…

Cmasher颜色包--共53种--全平台可用

Cmasher颜色包–共53种–全平台可用 往期推荐&#xff1a; ColorCET颜色包–共99种–全平台可用 ColorCET颜色包–共35种–全平台可用 Scientific colour maps颜色包–共35种–全平台可用 SciCoMap颜色包_共180种–全平台可用 海洋专用cmocean颜色包_共22种–全平台可用 Python…

pytoch安装指定版本教程pytorch1.3安装笔记

一、先生成一个环境 如果电脑里安装了其他的torch版本&#xff0c;另外生成一个环境可以防止原先torch版本被替换掉。 打开conda的终端窗口输入以下命令就可以生成一个名为torch_1.3的环境&#xff1a; conda create -n torch_1.3 python3.6 输入以下命令进入到torch_1.3的…

工作记录---(Explain执行计划详解--基于HS)--每天都要保持学习状态和专注的状态啊!!!

Explain详细说明&#xff1a; id列 id列的编号是 select 的序列号&#xff0c;有几个 select 就有几个id&#xff0c;并且id的顺序是按 select 出现的顺序增长的。MySQL将 select 查询分为简单查询(SIMPLE)和复杂查询(PRIMARY)。 复杂查询分为三类&#xff1a;简单子查询、派…

MXNet中图解稀疏矩阵(Sparse Matrix)的压缩与还原

1、概述 对于稀疏矩阵的解释&#xff0c;就是当矩阵里面零元素远远多于非零元素&#xff0c;且非零元素没有规律&#xff0c;这样的矩阵就叫做稀疏矩阵&#xff0c;反过来就是稠密矩阵&#xff0c;其中非零元素的数量与所有元素的比值叫做稠密度&#xff0c;一般稠密度小于0.0…

妙用Java 8中的 Function接口,消灭if...else(非常新颖的写法)

文章目录 Function 函数式接口Supplier供给型函数Consumer消费型函数Runnable无参无返回型函数Function函数的表现形式为接收一个参数&#xff0c;并返回一个值。Supplier、Consumer和Runnable可以看作Function的一种特殊表现形式 使用小技巧处理抛出异常的if处理if分支操作如果…

项目流程管理工具 OmniPlan Pro 4 mac中文版软件介绍

OmniPlan Pro mac是 The Omni Group 为 macOS 和 iOS 操作系统开发的项目管理软件。它允许用户创建和管理复杂的项目、定义任务、分配资源、跟踪进度和生成报告。 OmniPlan Pro mac包括甘特图、网络图、关键路径分析、资源均衡和成本跟踪等功能。 借助 OmniPlan Pro&#xff0…

G3ESa HENF318736R1 E3EB HENF315129R1

G3ESa HENF318736R1 E3EB HENF315129R1 该ARC研究探索了当前和历史市场表现以及相关技术和业务趋势&#xff0c;确定了领先的技术供应商&#xff0c;并为中央电站发电应用中的分布式控制系统的全球市场提供了五年全球预测。这项新研究基于ARC行业领先的市场研究数据库、广泛的…