vue js 前端同时下载多个文件,前端多文件下载

devtools/2024/9/20 7:27:49/ 标签: javascript, 前端, vue.js

在日常需求中,一般情况下,单次点击下载文件数量一般是一个,当然也有多个文件同时下载的需求,由于浏览器机制,不支持直接多个文件下载,所有需要特殊处理

案例图
在这里插入图片描述

不多说了,直接上代码

 //下载文件downloadPapers() {let obj = {id: this.examId,}exportFile的接口(obj).then((res) => {if (res.code == 200) {this.$message({message: '下载成功!',type: 'success',duration: 2000,})res.data.forEach((file, index) => {this.downloadFile(file,index == 0 ? this.timestamp + '文件1' : this.timestamp + '文件2'      //相当于是一个文件自定义的名称)})}})},//阻止href多文件下载只下载一个问题方法downloadFile(url, filename) {const xhr = new XMLHttpRequest()xhr.open('GET', url, true)xhr.responseType = 'blob'xhr.onload = () => {if (xhr.status === 200) {const blob = xhr.responseconst link = document.createElement('a')link.href = window.URL.createObjectURL(blob)link.download = filenamelink.click()}}xhr.send()},

http://www.ppmy.cn/devtools/101941.html

相关文章

Oracle使用手册

文章目录 Oracle使用手册登录查询常见视图类别 Oracle使用手册 登录查询 # sqlplus登录oracle sqlplus sys/root123 as sysdba sqlplus sys/root123 as sysoper sqlplus root/root123# 登录到指定数据库 sqlplus root/root123paradb# 查看当前登录到的用户 SELECT USER FROM …

【PGCCC】PostgreSQL 具有createdb的用户无法创建数据库的原因(之一)

在 PostgreSQL 中,尽管用户具有 CREATEDB 权限,但仍然可能无法创建数据库,这可能是由于以下原因之一: 数据库连接限制 每个 PostgreSQL 实例中有一个名为 max_connections 的参数,限制了允许的最大并发连接数。如果这…

嵌入式Linux学习笔记

1.文件操作命令 2.VI编辑器的部分命令 3.Uboot命令设置环境变量 4. uboot 的顶层 Makefile的重点是“make xxx_defconfig”和“make”这两个命令 ,分别如下: 5.在串口SecureCRT中利用uboot启动Linux内核的两种方式 6.Linux内核移植到开发板上也可以反…

32 - III. 从上到下打印二叉树 III

comments: true difficulty: 中等 edit_url: https://github.com/doocs/leetcode/edit/main/lcof/%E9%9D%A2%E8%AF%95%E9%A2%9832%20-%20III.%20%E4%BB%8E%E4%B8%8A%E5%88%B0%E4%B8%8B%E6%89%93%E5%8D%B0%E4%BA%8C%E5%8F%89%E6%A0%91%20III/README.md 面试题 32 - III. 从上到下…

从数据库中查找单词

我们知道,从文件中查找是一行一行的查找匹配,但是数据库就可以快速查找,节约时间; 我们先来讲一下大概思路(所有都为C语言); 首先使用access函数判断数据库字典有没有被创建,如果创…

【JavaEE初阶】TCP协议

目录 🌲TCP协议的概念 🚩TCP协议段格式 🚩TCP的特性 🌳TCP原理 🚩确认应答机制(安全机制) 🚩超时重传(安全机制) 🚩 连接管理(安全机制) 🚩滑动窗口(效率机制) &#x1f6a…

通过IDEA创建spring boot的web项目

1.Fle->New->Project,选择Maven&#xff0c;点击Next 2.修改项目名称&#xff0c;点击Finish 3.项目创建完毕&#xff0c;等待Maven下载完成 4.修改pom.xml文件&#xff0c;改成如下内容 <?xml version"1.0" encoding"UTF-8"?> <pr…

Python知识点:如何使用MySQL与PyMySQL进行数据库操作

使用MySQL与PyMySQL进行数据库操作的过程与使用PostgreSQL与Psycopg2类似。以下是一个简单的指南&#xff0c;介绍如何使用PyMySQL连接到MySQL数据库并进行基本的数据库操作。 1. 安装PyMySQL 首先&#xff0c;你需要安装PyMySQL库。如果还未安装&#xff0c;可以使用以下命令…

配置策略路由实战 附带基础网络知识

背景 作为一个软件开发人员&#xff0c;不可能做到只负责业务开发工作&#xff0c;一旦功能上线或者系统切换就会遇到非常多考验开发人员个人能力的场景&#xff0c;网络调整就是非常重要的一个方面&#xff0c;如果你在系统上线的过程中无法处理一些简单的网络问题或者听不懂…

PHP农场扶农系统智慧认养智慧乡村系统农场系统小程序源码

&#x1f331;科技赋能田园梦 —— 探索“农场扶农系统”与“智慧认养智慧乡村”新篇章&#x1f680; &#x1f308;【开篇&#xff1a;田园新风尚&#xff0c;科技引领未来】 在快节奏的都市生活中&#xff0c;你是否曾梦想过拥有一片属于自己的绿色天地&#xff1f;现在&am…

推荐系统实战第六章-粗排和重排(上)粗排

粗排是介于召回和精排之间的&#xff0c;由于多路召回筛选得到物料库量级仍然很大&#xff0c;无法满足在线实时训练的要求。并且如果召回后直接精排&#xff0c;可能对推荐系统精度无法保证。 一、模型结构 &#xff08;一&#xff09;粗排双塔和召回双塔的异同 1、相同点 …

一文搞懂大模型!基础知识、 LLM 应用、 RAG 、 Agent 与未来发展

LLM 探秘&#xff1a;想要深入了解人工智能界的“新宠”大型语言模型&#xff08;LLM&#xff09;吗&#xff1f;本文将带你走进 LLM 的世界&#xff0c;从入门知识到实际应用&#xff0c;全方位解读这个充满魔力的“大模型”。我们将一起揭开 LLM 的神秘面纱&#xff0c;领略其…

最佳实践 | SaleSmartly用HelpLook搭建知识库,客服效率提升,服务好全球数万客户

SaleSmartly&#xff0c;作为全渠道私域沟通工具的佼佼者&#xff0c;使用HelpLook开启了全新智能客服服务新体验。通过使用HelpLook搭建了AI知识库和博客中心&#xff0c;SaleSmartly不仅大幅提升了客服效率&#xff0c;还成功优化了品牌形象&#xff0c;服务覆盖全球数万客户…

VCTP(Visual Chain-of-Thought Prompting for Knowledge-Based Visual Reasoning)论文

目录 摘要介绍相关工作方法总体模型细节 实验 摘要 知识型视觉推理仍然是一个艰巨的任务&#xff0c;因为它不仅要求机器从视觉场景中解释概念和关系&#xff0c;而且还需要将它们与外部世界知识联系起来&#xff0c;对开放世界问题进行推理链。然而&#xff0c;以前的工作将视…

Kubernetes(k8s)中部署WordPress

在Kubernetes&#xff08;k8s&#xff09;中部署WordPress通常涉及创建一个Deployment来管理WordPress的Pod&#xff0c;以及一个Service来暴露WordPress应用。此外&#xff0c;由于WordPress需要数据库支持&#xff0c;你还需要部署一个MySQL或MariaDB的Pod和Service。 以下是…

redis分布式是如何实现的(面试版)

需要结合项目中的业务进行回答&#xff0c;通常情况下&#xff0c;分布式锁使用的场景&#xff1a;集群情况下的定时任务、抢单、幂等性场景。 下面先来看一个抢卷场景&#xff1a; 以下情况会出现超卖情况&#xff1a; 因为线程会交替执行&#xff0c;所以线程查询优惠价的数…

探索Git:分布式版本控制系统的力量(二)

&#x1f600;前言 本篇博文是关于分布式版本控制系统Git的一些基本介绍&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的满意是我…

Android自定义一个带背景的圆环形进度条(Kotlin)

前言 在Android开发过程中&#xff0c;难免遇到一些复杂的UI组件需要我们自定义 当然使用系统原生组件拼凑也能完成&#xff0c;但是UI复杂度增加了不说&#xff0c;在更新UI状态的时候还不好管理&#xff0c;最重要的是复用的价值不大&#xff0c;上述的操作很容易引增加码冗…

Oracle字符串聚合函数LISTAGG

在Oracle 19c中&#xff0c;LISTAGG函数是一个非常有用的字符串聚合函数&#xff0c;它可以将来自多个行的值连接成一个单独的字符串。这个函数特别适用于将分组内的多个值合并为一个逗号分隔&#xff08;或其他分隔符&#xff09;的字符串。 LISTAGG函数的基本语法如下&#…

LeetCode 3133.数组最后一个元素的最小值:位运算+双指针

【LetMeFly】3133.数组最后一个元素的最小值&#xff1a;位运算双指针 力扣题目链接&#xff1a;https://leetcode.cn/problems/minimum-array-end/ 给你两个整数 n 和 x 。你需要构造一个长度为 n 的 正整数 数组 nums &#xff0c;对于所有 0 < i < n - 1 &#xff0…