在vue中实现下载文件功能

实际操作为,在表格中

我们可以获取到文件的id,通过插槽就可以实现

<template #default="scope">
              <el-button type="text" @click="handleDown(scope.row)">
                <span>下载</span>
              </el-button>
</template>

 handleDown(val){
      const a = document.createElement("a");
      const event = new MouseEvent("click");
      a.download = val.attachmentName;
      a.href = 下载文件的基本url + val.documentId;
      a.dispatchEvent(event);
    },

解析上段代码

  1. const a = document.createElement("a");:创建了一个新的 <a> 元素,该元素用于生成下载链接。
  2. const event = new MouseEvent("click");:创建了一个新的 MouseEvent 对象,该对象用于模拟点击事件。
  3. a.download = val.attachmentName;:将下载链接的文件名设置为 val.attachmentName
  4. a.href = 下载文件的基本Url + val.documentId;+后面为参数,也就是文件的id
  5. a.dispatchEvent(event);: dispatch 事件,以模拟点击下载链接,从而触发浏览器的下载行为。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

吃透1850道真题和解析备考AMC8和AMC(1020240524持续发布)

多做真题&#xff0c;吃透真题和背后的知识点是备考AMC8、AMC10有效的方法之一&#xff0c;通过做真题&#xff0c;可以帮助孩子找到真实竞赛的感觉&#xff0c;而且更加贴近比赛的内容&#xff0c;可以通过真题查漏补缺&#xff0c;更有针对性的补齐知识的短板。 今天我们继续…

善用KEGG数据库挖掘目的基因

有关KEGG的分析在很多已发表的论文中都十分常见&#xff0c;涉及到的方向也很广泛&#xff0c;比如&#xff1a;代谢组、表观组、转录组等等。通常得到相关的基因集或者代谢物后&#xff0c;我们都希望能够快速了解它们的蛋白功能和涉及的调控机制&#xff0c;从而进一步锁定接…

Substrate 优秀学员专访|从前端到高级测试工程师,他坚定奔赴 Web3 红海

4 月 29 日&#xff0c;第 14 期「Substrate 区块链开发入门课」课程圆满毕业收官&#xff0c;课程涌现了新一批优秀毕业学员&#xff0c;他们即将带着自己在课程中学习的新知识、新经验&#xff0c;奔赴 Web3 行业各个赛道。在这些学员中&#xff0c;有这样一位开发实力突出、…

线上研讨会 | 探索非标自动化产线行业的数转智改之路

报名链接&#xff1a; 2024 达索系统工业大发展在线研讨会 (tbh5.com)

2024电工杯A题保姆级分析完整思路+代码+数据教学

2024电工杯A题保姆级分析完整思路代码数据教学 A题题目&#xff1a;园区微电网风光储协调优化配置 接下来我们将按照题目总体分析-背景分析-各小问分析的形式来 总体分析&#xff1a; 题目要求对园区微电网进行风光储协调优化配置&#xff0c;具体涉及三个园区&#xff08…

Python魔法学院:PySpider篇——网络世界的探险与征服

Hi&#xff0c;我是阿佑&#xff0c;迎来到Python魔法学院&#xff0c;今天阿佑要带大家学习的是PySpider篇——一门让你在网络世界中探险与征服的魔法课程。从环境搭建到高级功能应用&#xff0c;再到性能优化&#xff0c;每一个章节都是成为数据大师的必经之路&#xff01; 文…

深度学习之基于YOLOV5的口罩检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 随着全球公共卫生事件的频发&#xff0c;口罩成为了人们日常生活中不可或缺的一部分。在公共场所&am…

Nacos 微服务管理

Nacos 本教程将为您提供Nacos的基本介绍&#xff0c;并带您完成Nacos的安装、服务注册与发现、配置管理等功能。在这个过程中&#xff0c;您将学到如何使用Nacos进行微服务管理。下方是官方文档&#xff1a; Nacos官方文档 1. Nacos 简介 Nacos&#xff08;Naming and Confi…

Qt for Android 乱码问题

java文件乱码 导致编译失败 使用notepad等查看java文件的编码&#xff0c; 修改成utf-8&#xff0c;否则会因为乱码编译失败&#xff0c; 记住是utf8不是utf8-bom. 做如下修改确保utf8文件不被修改掉。 编译时错误显示的是乱码 如果开发其他乱码再改回&#xff0c; 原本是Sys…

Q-Learning学习笔记-李宏毅

introduction 学习的并不是policy&#xff0c;而是学习critic&#xff0c;critic用来评价policy好还是不好&#xff1b;一种critic&#xff1a;state value function V π ( s ) V^\pi(s) Vπ(s)是给定一个policy π \pi π&#xff0c;在遇到state s s s之后累积的reward的…

docker所在磁盘空间不足 迁移数据

1.查看原始目录docker info | grep "Docker Root Dir" 一般在/var/lib/docker 2.停止docker service docekr stop 3.移动数据 注意 移动前不要创建docker目录&#xff01; mv /var/lib/docker /home/docker 4.进入目录查看是否与原始目录相同&#xff0c;确认一…

操作系统总结(2)

目录 2.1 进程的概念、组成、特征 &#xff08;1&#xff09;知识总览 &#xff08;2&#xff09;进程的概念 &#xff08;3&#xff09;进程的组成—PCB &#xff08;4&#xff09;进程的组成---程序段和数据段 &#xff08;5&#xff09;程序是如何运行的呢&#xff1f…

微服务架构下Docker容器技术与Kubernetes(K8S)

Kubernetes、微服务和Docker容器技术的结合提供了一个强大、灵活且高效的平台&#xff0c;能够应对现代应用程序的复杂性和动态性。Kubernetes的自动化管理、服务发现、负载均衡和配置管理&#xff0c;与Docker的标准化打包和运行环境相结合&#xff0c;最大化地发挥了微服务架…

听说京东618裁员没?上午还在赶需求,下午就开会通知被裁了~

文末还有最新面经共享群&#xff0c;没准能让你刷到意向公司的面试真题呢。 京东也要向市场输送人才了? 在群里看到不少群友转发京东裁员相关的内容&#xff1a; 我特地去网上搜索了相关资料&#xff0c;看看网友的分享&#xff1a; 想不到马上就618了&#xff0c;东哥竟然抢…

电磁仿真软件CST六面体网格和六面体TLM网格的区别【仿真入门】

六面体网格&#xff08;1&#xff09; Time Domain Solver中使用的Hexahedral Mesh&#xff01; 网格可以说是为了Maxwell方程式计算&#xff0c;将仿真结构分割成许多小的网格单元。因此&#xff0c;仿真计算中识别的结构是网格结构。 Time Domain Solver中使用的Hexahedra…

【Python】 去除字符串中的所有空白字符

基本原理 在Python中&#xff0c;字符串&#xff08;String&#xff09;是不可变的数据类型&#xff0c;这意味着一旦创建了一个字符串&#xff0c;就不能修改它的内容。然而&#xff0c;我们可以创建一个新的字符串&#xff0c;它包含原始字符串中的字符&#xff0c;但不包含…

【Unitydemo制作】音游制作—控制器与特效

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;就业…

2024电工杯A题详细思路代码分析数学建模:园区微电网风光储协调优化配置

题目分析&#xff1a;园区微电网风光储协调优化配置 我们会先给出三个问题总体的分析&#xff0c;最后会详细分析问题一的建模和详细内容。 背景&#xff1a; 园区微电网由风光发电和主电网联合为负荷供电&#xff0c;为了尽量提高风光电量的负荷占比&#xff0c;需配置较高比…

《TortoiseSVN》简单使用说明

##################工作记录#################### 常用图标说明 一个新检出的工作副本 修改过的文件 更新过程遇到冲突的文件 你当前对文件进行了锁定&#xff0c;不要忘记不使用后要解锁&#xff0c;否则别人无法使用 当前文件夹下的某些文件或文件夹已经被调度从版本控制…

Lc42---- 1200. 最小绝对差(java版)---排序

1.题目描述 2.知识点和思路 &#xff08;1&#xff09;先排序 &#xff08;2&#xff09;再计算元素对之间的差值&#xff0c;找到最小绝对差&#xff1a; &#xff08;初始化 minDiff 为最大整数值&#xff0c;然后遍历数组找出相邻元素之间的最小差值。&#xff09; int m…