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

vue3 下载图片(包括多图片下载)

单图片下载

//使用
download('https://img1.baidu.com/it/u=1493209339,2544178769&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1715101200&t=854f3434686cfd2cba9d6a528597d15c')//下载逻辑
const download = async (modelUrl) => {const response = await fetch(modelUrl);// 将响应体转换为Blobconst blob = await response.blob();// 创建隐藏的a标签来触发下载const link = document.createElement('a');link.href = URL.createObjectURL(blob);link.download = 'image.jpg'; // 自定义下载的文件名link.click();document.body.removeChild(link); // 下载后移除元素
}

多图片打包下载
安装yarn add jszipnpm i jszip
yarn add file-savernpm i file-saver

import JSZip from "jszip"
import { saveAs } from 'file-saver'
const imgList = ref([{ id: 1, url: 'https://img1.baidu.com/it/u=1493209339,2544178769&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1715101200&t=854f3434686cfd2cba9d6a528597d15c' }, { id: 2, url: 'https://img1.baidu.com/it/u=3714509592,1056938510&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1715101200&t=855f002cda64244524d6945999b0be2a' }])
const downloadImg = async () => {const imageUrls = []; // 替换为实际的图片URL数组const filenames = []; // 对应的文件名数组arr.forEach(ii => {imageUrls.push(ii.url)filenames.push((ii.name || ii.id) + '.png')})createAndDownloadImageZip(imageUrls, filenames);
}//
async function createAndDownloadImageZip(images, filenames) {console.log(images)const zip = new JSZip();for (let i = 0; i < images.length; i++) {// 获取图片资源fetch(images[i]).then(response => response.blob()).then(blob => {// 将Blob添加到ZIP包中,这里假设图片名为'image'+i+'.jpg'zip.file(`img${i}.jpg`, blob);// 在所有图片都处理完之后生成ZIPif (i === images.length - 1) {zip.generateAsync({ type: 'blob' }).then(content => {// 下载ZIP文件saveAs(content, 'downloaded_images.zip');});}});}
}

相关文章:

vue3 下载图片(包括多图片下载)

单图片下载 //使用 download(https://img1.baidu.com/it/u1493209339,2544178769&fm253&app138&sizew931&n0&fJPEG&fmtauto?sec1715101200&t854f3434686cfd2cba9d6a528597d15c)//下载逻辑 const download async (modelUrl) > {const respons…...

LabVIEW如何通过子VI更改主VI控件属性?

在LabVIEW中&#xff0c;可以通过使用Local Variable或Property Node来实现主VI控件属性的更改。这些方法可以在主VI和子VI之间传递数据和控件属性。 Local Variable: 使用Local Variable可以在子VI中直接访问并修改主VI中的控件属性。在子VI中创建Local Variable&#xff0c;并…...

关于MS-DOS时代的回忆

目录 一、MS-DOS是什么&#xff1f; 二、MS-DOS的主要功能有哪些&#xff1f; 三、MS-DOS的怎么运行的&#xff1f; 四、微软开源MS-DOS源代码 五、高手与漂亮女同学 一、MS-DOS是什么&#xff1f; MS-DOS&#xff08;Microsoft Disk Operating System&#xff09;是微软公…...

数据库索引(Mysql)

简述:数据库索引是加速数据检索,提高查询效率的一种数据结构 语法规则 创建索引 --通用语法规则 --[内容] 可选参数 --UNIQUE: 可选关键字&#xff0c;用于创建唯一索引&#xff0c;确保索引列的值是唯一的 CREATE [UNIQUE] INDEX 索引名 ON 表名(字段名,...) [ASC | DESC];…...

异常-Exception

异常介绍 基本概念 Java语言中&#xff0c;将程序执行中发生的不正常情况称为“异常”。&#xff08;开发过程中的语法错误和逻辑错误不是异常&#xff09;执行过程中所发生的异常事件可分为两大类 1&#xff0c;Error&#xff08;错误&#xff09;&#xff1a;Java虚拟机无法…...

ctfshow——SQL注入

文章目录 SQL注入基本流程普通SQL注入布尔盲注时间盲注报错注入——extractvalue()报错注入——updataxml()Sqlmap的用法 web 171——正常联合查询web 172——查看源代码、联合查询web 173——查看源代码、联合查询web 174——布尔盲注web 176web 177——过滤空格web 178——过…...

第十三章 计算机网络

这里写目录标题 1.网络设备2.协议簇2.1电子邮件(传输层)2.2地址解析(网际层)2.3DHCP(动态主动配置协议)2.4URL(统一资源定位器)2.5IP地址和子网掩码 1.网络设备 物理层&#xff1a;中继器&#xff0c;集线器(多路中继器) 数据链路层&#xff1a;网桥&#xff0c;交换机(多端口…...

商品详情 API 返回值说明

商品详情API接口在多个领域和场景中都有广泛的应用&#xff0c;以下是一些常见的应用场景&#xff1a; 竞品分析&#xff1a;企业可以利用商品详情API接口获取竞品的所有详细信息&#xff0c;如价格、发货地、上架时间、销售量等。通过分析这些竞品信息&#xff0c;企业可以更…...

层级实例化静态网格体组件:开启大量模型处理之门

前言 在数字孪生的世界里&#xff0c;我们常常需要构建大量的模型来呈现真实而丰富的场景。然而&#xff0c;当使用静态网格体 &#xff08;StaticMesh &#xff09;构建大量模型时&#xff0c;可能会遇到卡顿的问题&#xff0c;这给我们带来了不小的困扰&#x1f623;。那么&…...

【网络知识】光猫、路由器 和 交换机 的作用和区别?

数字信号&#xff1a;是指自变量是离散的、因变量也是离散的信号&#xff0c;这种信号的自变量用整数表示&#xff0c;因变量用有限数字中的一个数字来表示。在计算机中&#xff0c;数字信号的大小常用有限位的二进制数表示。 模拟信号&#xff1a;模拟信号是指用连续变化的物…...

初识Electron,创建桌面应用

历史小剧场 呜呼&#xff01;古有匈奴犯汉&#xff0c;晋室不纲&#xff0c;铁木夺宋&#xff0c;虏清入关&#xff0c;神舟陆沉二百年有余&#xff0c;中国之见灭于满清初非满人能灭之&#xff0c;能有之也因有汉奸以作虎怅&#xff0c;残同胞媚异种&#xff0c;始有吴三桂洪承…...

AI编码时代到来?实现编程梦想的利器—Baidu Comate测评

文章目录 Comate智能编码是什么&#xff1f;Comate支持的环境 Comate应用安装实际操作对话式生成代码生成代码注释智能单测项目测试调优功能 总结 Comate智能编码是什么&#xff1f; 在如今这个拥抱AI的时代&#xff0c;市面上已经产出了很多Ai代码助手&#xff0c;如果你还没…...

去中心化自治组织(DAO)

文章目录 一、DAO (Decentralized Autonomous Organization) 去中心化自治组织 二、举例说明 1、例子1 2、例子2 总结 一、DAO (Decentralized Autonomous Organization) 去中心化自治组织 DAO是一种基于区块链平台上的组织结构&#xff0c;它通过智能合约来实现组织的…...

MySQL之多表查询

1. 前言 多表查询&#xff0c;也称为关联查询.指两个或两个以上的表一起完成查询操作.前提条件 : 这些一起查询的表之间是有关系的(一对一/一对多).他们之间一定是有关联字段&#xff0c;这个关联字段可能建立了外键&#xff0c;也可能没有建立外键. 2. 笛卡尔积现象(交叉连接…...

极端天气频发,我们普通人如何保全自己

随着全球气候变暖的加剧&#xff0c;极端天气事件如同一位不请自来的“不速之客”&#xff0c;频繁地闯入我们的生活。暴风雨、暴风雪、台风、干旱、热浪等极端天气现象&#xff0c;不仅给人们的生命和财产安全带来了前所未有的挑战&#xff0c;更对社会的正常秩序构成了严重威…...

直面市场乱价,品牌商家该如何解决?

在当今的商业世界中&#xff0c;品牌商面临着一系列严峻挑战&#xff0c;其中如何有效管理经销商价格是一个关键难题。经销商随意调整价格的行为&#xff0c;不仅会损害品牌的信誉与形象&#xff0c;还可能导致市场秩序混乱&#xff0c;使品牌利润大幅缩水。因此&#xff0c;采…...

Spring中的Bean相关理解

在Spring框架中&#xff0c;Bean是一个由Spring IoC容器实例化、配置和管理的对象。Bean是一个被Spring框架管理并且被应用程序各个部分所使用的对象。Spring IoC容器负责Bean的创建、初始化、依赖注入以及销毁等生命周期管理。 注&#xff1a;喜欢的朋友可以关注公众号“JAVA学…...

操作系统实战(二)(linux+C语言)

实验内容 通过Linux 系统中管道通信机制&#xff0c;加深对于进程通信概念的理解&#xff0c;观察和体验并发进程间的通信和协作的效果 &#xff0c;练习利用无名管道进行进程通信的编程和调试技术。 管道pipe是进程间通信最基本的一种机制,两个进程可以通过管道一个在管道一…...

哪些情况下会触发MySQL的预读机制?

MySQL的预读机制主要与其底层存储引擎的实现有关&#xff0c;尤其是InnoDB存储引擎。预读&#xff08;Pre-reading&#xff09;或预取&#xff08;Prefetching&#xff09;是一种性能优化技术&#xff0c;其中数据库系统主动读取可能很快就会被查询到的数据页到缓冲池&#xff…...

react使用谷歌人机验证

在项目中&#xff0c;需要对请求验证&#xff0c;防止被爆破&#xff0c;这里使用的是谷歌的recaptcha-v3。 1.申请谷歌人机验证的api 申请链接,申请完后需要将两个谷歌颁发的key分别写入前&#xff0c;后端的配置环境中&#xff0c;后面会使用. 2.前端部分 前端使用的是viteC…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

【JVM】Java虚拟机(二)——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

Appium下载安装配置保姆教程(图文详解)

目录 一、Appium软件介绍 1.特点 2.工作原理 3.应用场景 二、环境准备 安装 Node.js 安装 Appium 安装 JDK 安装 Android SDK 安装Python及依赖包 三、安装教程 1.Node.js安装 1.1.下载Node 1.2.安装程序 1.3.配置npm仓储和缓存 1.4. 配置环境 1.5.测试Node.j…...

验证redis数据结构

一、功能验证 1.验证redis的数据结构&#xff08;如字符串、列表、哈希、集合、有序集合等&#xff09;是否按照预期工作。 2、常见的数据结构验证方法&#xff1a; ①字符串&#xff08;string&#xff09; 测试基本操作 set、get、incr、decr 验证字符串的长度和内容是否正…...