vue点击按钮同时下载多个文件

news2024/7/6 18:22:39

点击下载按钮根据需要的id调接口拿到返回需要下载的文件
在这里插入图片描述
再看返回的数据结构
数组中一个对象,就是一个文件,多个对象就是多个文件
在这里插入图片描述
下载函数

 // 下载
    tableDownload(row) {
      getuploadInventoryDownload({ sysBatch: row.sysBatch, fileName: row.fileName }).then((res) => {
        console.log(res)
        res.forEach((file, index) => {
          // elink.download = decodeURI(file.headers['Content-Disposition'][0].split(';')[1].split('=')[1])
          const name = decodeURI(file.headers['Content-Disposition'][0].split(';')[1].split('=')[1])
          const name2 = name.slice(8)
          console.log(name.slice(8))
          const blob = this.buildBlob(file.body)
          this.downLoadFile(blob, name2)
        })
      })
    },
    downLoadFile(blob, filename) {
      const link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = filename
      document.body.appendChild(link)

      link.click()
      URL.revokeObjectURL(link.href) // 释放URL 对象
      document.body.removeChild(link)
    },
    buildBlob(data) {
      const raw = window.atob(data)
      const rawLength = raw.length
      const uInt8Array = new Uint8Array(rawLength)
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array])
    },

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

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

相关文章

STM32 TIM编码器接口

单片机学习&#xff01; 目录 文章目录 前言 一、编码器接口简介 1.1 编码器接口作用 1.2 编码器接口工作流程 1.3 编码器接口资源分布 1.4 编码器接口输入引脚 二、正交编码器 2.1 正交编码器功能 2.2 引脚作用 2.3 如何测量方向 2.4 正交信号优势 2.5 执行逻辑 三、编码器定时…

前端+php:实现提示框(自动消失)

效果 php部分&#xff1a;只展示插入过程 <?php//插入注册表中$sql_insert "INSERT INTO regist_user(userid,password,phone,email)VALUES (" . $_POST[UserID] . "," . CryptPass($_POST[Password]) . "," . $_POST[Phone] . ",&qu…

“而且,再加上”可以用哪个语法来表示,柯桥考级韩语学习

语法 --는/은/ㄴ 데다가 1.语法&#xff1a;는/은/ㄴ 데다가 2.表示&#xff1a;用于谓词词干和体词谓词形后, 表示在原有的状况上再加上其他情况。 3.添加&#xff1a; 4.例句&#xff1a; 当然&#xff0c;与这个语法含义相近的还有不少语法&#xff0c;有一部分是初级暂时…

【AI视野·今日NLP 自然语言处理论文速览 第八十期】Fri, 1 Mar 2024

AI视野今日CS.NLP 自然语言处理论文速览 Fri, 1 Mar 2024 Totally 67 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Loose LIPS Sink Ships: Asking Questions in Battleship with Language-Informed Program Sampling Authors G…

Libevent的使用及reactor模型

Libevent 是一个用C语言编写的、轻量级的开源高性能事件通知库&#xff0c;主要有以下几个亮点&#xff1a;事件驱动&#xff08; event-driven&#xff09;&#xff0c;高性能;轻量级&#xff0c;专注于网络&#xff0c;不如 ACE 那么臃肿庞大&#xff1b;源代码相当精炼、易读…

HTTP常用状态码详解

目录 1xx - 信息性状态码 2xx - 成功状态码 3xx - 重定向状态码 4xx - 客户端错误状态码 5xx - 服务器错误状态码 总结 HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是一种用于传输超文本的应用层协议。在HTTP通信中&#xff0c;服务器和客户端之间会通过状态…

Chrome禁止自动升级

一、关闭计划任务 1、首先我们需要右键点击我的电脑&#xff0c;在打开的选项里选择管理。   2、在打开的对话框中选择任务计划程序。   3、在任务计划程序库中找到两个和chrome自动更新相关的任务计划GoogleUpdateTaskMachineCore与GoogleUpdateTaskMachineUA。     4…

C++模拟揭秘刘谦魔术,领略数学的魅力

新的一年又开始了&#xff0c;大家新年好呀~。在这我想问大家一个问题&#xff0c;有没有同学看了联欢晚会上刘谦的魔术呢&#xff1f; 这个节目还挺有意思的&#xff0c;它最出彩的不是魔术本身&#xff0c;而是小尼老师“念错咒语”而导致他手里的排没有拼在一起&#xff0c;…

Python数据可视化库之bashplotlib使用详解

概要 在数据可视化领域,Python拥有许多优秀的库,如Matplotlib、Seaborn等,它们可以创建漂亮而复杂的图形。但是,有时候我们可能需要在终端中绘制简单的图形,这时候Bashplotlib就派上了用场。Bashplotlib是一个Python库,可以在终端中绘制基本的图形,如条形图、散点图等。…

用Python爬取古诗文网的各类古诗

fetch-gushiwen 用途 可以拿去用于个人知识库、知识图谱的创建等其他学习用途。 使用 输入古诗文网的链接&#xff0c;即可爬取该页面所有诗歌的诗名&#xff0c;作者&#xff0c;朝代&#xff0c;内容&#xff0c;译文&#xff0c;注释&#xff0c;赏析&#xff0c;创作背…

文心一言 VS 讯飞星火 VS chatgpt (208)-- 算法导论15.4 5题

五、设计一个 O( n 2 n^2 n2) 时间的算法&#xff0c;求一个 n 个数的序列的最长单调递增子序列。要写代码的时候&#xff0c;请用go语言。 文心一言&#xff0c;抛panic&#xff1a; 在 Go 语言中设计一个 O(n^2) 时间复杂度的算法来求一个 n 个数的序列的最长单调递增子序列…

【数据结构】20 树的应用(堆及其操作)

堆的定义 堆是一种优先队列&#xff0c;从堆中取出元素时按照元素的优先级大小&#xff0c;而不是元素进入队列的先后顺序。 堆的最常用结构是二叉树&#xff0c;一般为完全二叉树。通常使用数组来实现堆的存储。 最大堆&#xff1a;任一结点的值大于或等于其子节点的值。这一…

【论文阅读】Mamba:选择状态空间模型的线性时间序列建模(一)

文章目录 Mamba:选择状态空间模型的线性时间序列建模介绍状态序列模型选择性状态空间模型动机&#xff1a;选择作为一种压缩手段用选择性提升SSM 选择性SSM的高效实现先前模型的动机选择扫描总览&#xff1a;硬件感知状态扩展 Mamba论文 Mamba:选择状态空间模型的线性时间序列建…

【.NET Core】深入理解IO - 读取器和编写器

【.NET Core】深入理解IO - 读取器和编写器 文章目录 【.NET Core】深入理解IO - 读取器和编写器一、概述二、BinaryReader和BinaryWriter2.1 BinartReader类2.2 BinaryWriter类 三、StreamReader和StreamWriter3.1 StreamReader类3.1 StreamWriter类StreamWriter类构造函数Str…

AI大语言模型【成像光谱遥感技术】ChatGPT应用指南

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境&#xff0c;是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型&#xff0c;在理解和生成人类语言方面表现出了非凡的能力。本文重点介绍ChatGPT在遥感中的应用&#xff0c;人工智能…

想学习FPGA,建议购买哪一款开发板呢?

FPGA项目&#xff1a; 多通道信号采集呈像系统 该系统是以Artix-7系列的FPGA为主控芯片&#xff0c;设计并实现了一款基于A7系列开发板的多通道信号采集呈像系统&#xff0c;该设计采用DAC芯片&#xff08;数模转换芯片&#xff09;将数字信号转换成模拟信号&#xff0c;通过…

LLM春招,搜广推,nlp(2)

Encoder和Decoder怎么交互的 decoder里面的K&#xff0c;V输入用的是encoder的输出&#xff0c;并不是共享了K, V参数&#xff0c;decoder每层的参数都是独立的。Decoder每层是有两块Attention的&#xff1a;一块是正常的Self-Attention&#xff0c;QKV的输入都来自Decoder上一…

ArcGIS学习(九)选址分析

ArcGIS学习(九)选址分析 本任务给大家带来的案例是租房选址分析。选址分析是我们平时经常接触到的分析场景。概括起来说,选址分析就是根据选址条件来确定哪些区域满足我们的选址要求。首先,先来看看我们这个案例的场景和基础数据。我们以某个城市某一租客的租房选址为例。…

STM32CubeMX学习笔记8 -ADC

1. ADC简介 ADC 是Analog-to-Digital Converter的缩写。指模/数转换器或者模拟/数字转换器。是指将连续变量的模拟信号转换为离散的数字信号的器件。典型的模拟数字转换器将模拟信号转换为表示一定比例电压值的数字信号。简单地说就是将模拟电压值&#xff0c;转换成对应的肉眼…

完结撒花~Matlab论文插图绘制模板第139期—罗盘图

2021年2月2日&#xff0c;Matlab论文插图绘制模板第1期&#xff0c;启动。 三年后…… 2024年3月4日&#xff0c;Matlab论文插图绘制模板第139期&#xff0c;完结。 别的也不多说了&#xff0c;《Matlab论文插图绘制模板》1-139期精修合集&#xff0c;正加速整理制作中&…