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

news2024/11/16 3:17:44

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

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

不多说了,直接上代码

 //下载文件
      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.response
            const link = document.createElement('a')
            link.href = window.URL.createObjectURL(blob)
            link.download = filename
            link.click()
          }
        }
        xhr.send()
      },

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

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

相关文章

Transformer经典模型实战:零基础训练一个面向中文的T5模型(Text to Text Transfer Transformer)

scient scient一个用python实现科学计算相关算法的包,包括自然语言、图像、神经网络、优化算法、机器学习、图计算等模块。 scient源码和编译安装包可以在Python package index获取。 The source code and binary installers for the latest released version ar…

景联文科技提供语音采集服务:开启智能交互新纪元

随着人工智能技术的飞速发展,语音交互已成为连接人与智能设备的重要桥梁。无论是智能助手、智能家居还是自动驾驶汽车,语音识别技术都是其背后不可或缺的核心力量。 为了满足各行各业对高质量语音数据的需求,景联文科技凭借自身强大的数据采集…

XGen —— 导入Hou

动力学解算 选择description,转化为交互式Groom; 选择description,将引导线转化为曲线; 添加linearWire,并选择转化后的曲线生成解算线 选择上述生成的解算线,创建动力学; 导出解算的Xgen 导出a…

Edge SCDN:构建更快更安全的网络世界

什么是Edge SCDN? Edge SCDN,即边缘安全加速,是一种结合了传统CDN(内容分发网络)技术与网络安全防护功能的服务。传统的CDN通过在全球范围内分布服务器节点来加速网站内容的分发,提高访问速度和用户体验。…

备考计算机二级Python之Day4作业编程题

1、输入一个年份,输出是否为闰年。 #闰年条件:能被4整除但不能被100整除,或者能被400整除的年份都是闰年。 neval(input("请输入一个年份:")) if (n%40 and n%100!0) or (n%4000):print("该年份是闰年") els…

68 H3C SecPath F1000 (系统模块介绍-1)

68 H3C SecPath F1000 (系统模块介绍) 01-高可靠性 特性简介 高可靠性(High Availability),简称为HA,能够在通信线路或设备产生故障时提供备用方案,当其中一个网络节点发生故障时&#xff0c…

生信是什么?生物信息学的基础概念与应用领域-生信圆桌

介绍 生信,全称为生物信息学(Bioinformatics),是指将计算机科学、数学和统计学的方法应用于生物学数据的处理、分析和解释。随着基因组测序技术的发展和大规模生物数据的产生,生物信息学成为了生命科学研究中的一个核…

浅谈AI+工业视觉检测技术应用的优化

1 高质量替代人眼,助力智能制造 视觉是人类获取信息最主要的渠道,它使人们得以感知和理解周边的世界。通过视觉,人类可以感知外界物体的大小、明暗、颜色、动静,获得对机体生存具有重要意义的各种信息。人类的大脑皮层约有70%都在…

arthas源码刨析:arthas 命令粗谈(3)

文章目录 dashboardwatchretransform 前面介绍了 arthas 启动相关的代码并聊了聊怎么到一个 shellserver 的建立。 本篇我们来探讨一下几个使用频次非常高的命令是如何实现的。 dashboard 想看这个命令的主要原因是编程这些年来从来没有开发过 terminal 的这种比较花哨的界面&a…

最新出炉 -Web自动化测试之playwright:概述

概述 playwright是由微软开发的Web UI自动化测试工具, 支持Node.js、Python、C# 和 Java语言,本文将介绍playwright的特性以及它的简单使用。 playwright特性 playwright具有以下特点: 一、支持所有主流浏览器 支持所有主流浏览器&#x…

从开发到集成:视频美颜SDK与直播美颜API详解

在本文中,我们将详细探讨视频美颜SDK的开发过程及其与直播美颜API的集成方案,帮助开发者更好地理解和应用这些技术。 一、视频美颜SDK的开发概述 视频美颜SDK是一个用于实时视频处理的开发工具包,提供了包括磨皮、美白、瘦脸、眼睛放大等多…

各类软件历史版本的下载地址

postman,notpad等 https://www.filehorse.com/software-developer-tools/https://www.filehorse.com/software-developer-tools/

数业智能心大陆AI大模型,共情陪伴你的心理健康

大模型的出现,使得AI在语音识别、自然语言处理、计算机视觉等领域的性能得到了极大的提升,随着硬件设备的不断升级和优化,以及算法的不断改进,大模型的规模和性能也在不断提升,大模型的优势在于其强大的表示能力和泛化…

不愿回流上班,离职博主们不断寻找新的“栖息地”

文 | 螳螂观察 作者 | 如意 “替大家试过了,不上班真的很爽。” “985本硕,年薪40万裸辞了。” “不干了,谁家好人半夜12点还在司啊!” 标题熟悉吧?对,这拨人你一定看到了,说人生是旷野&am…

45+用户占比近30%,网文产业如何赋能IP长链?

网文市场加速发展,巨头抢占中老年用户 作者|吕娆炜 排版|张思琪 干货抢先看 1. 我国网文产业市场规模突破3000亿元,在用户方面,截至2023年底,我国网文用户数量达5.37亿,同比增长9%&#xff0c…

【FreeRTOS】信号量

0 前言 学习视频: 【FreeRTOS入门与工程实践 --由浅入深带你学习FreeRTOS(FreeRTOS教程 基于STM32,以实际项目为导向)】 【精准空降到 00:42】 https://www.bilibili.com/video/BV1Jw411i7Fz/?p39&share_sourcecopy_web&…

源2.0-M32大模型发布4bit/8bit量化版! 运行显存仅需23GB,性能可媲美LLaMA3

近日,浪潮信息发布源2.0-M32大模型4bit和8bit量化版,性能比肩700亿参数的LLaMA3开源大模型。4bit量化版推理运行显存仅需23.27GB,处理每token所需算力约为1.9 GFLOPs,算力消耗仅为同等当量大模型LLaMA3-70B的1/80。而LLaMA3-70B运…

删除Eureka注册中心已经注册的服务

1.登录Eureka查看需要删除的服务。 2.使用postman或者apipost工具,请求方式DELETE, 接口地址输入:eureka的ip地址/eureka/apps/ Application / Status 例如: http://192.168.194.60:8761/eureka/apps/VUE-MANAGER-SERVICE/10.42.0.138:vue-manager…

酷家乐 同盾滑块分析

声明: 本文章中所有内容仅供学习交流使用,不用于其他任何目的,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关! 有相关问题请第一时间头像私信联系我…

【Hot100】LeetCode—114. 二叉树展开为链表

目录 1- 思路技巧——借助指针 2- 实现⭐114. 二叉树展开为链表——题解思路 3- ACM 实现 原题连接:114. 二叉树展开为链表 1- 思路 技巧——借助指针 思路:通过 ① 将左子树的右下结点的 .next ——> 拼接到当前节点的右子树上。 构造 cur 指针&a…