在vue中实现下载文件功能

embedded/2024/11/13 12:53:16/

实际操作为,在表格中

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

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

javascript"> 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 事件,以模拟点击下载链接,从而触发浏览器的下载行为。

http://www.ppmy.cn/embedded/43306.html

相关文章

Java技术精粹:高级面试问题与解答指南(一)

Java 面试问题及答案 问题1&#xff1a;请解释Java中的多态性&#xff0c;并给出一个例子。 答案&#xff1a; 多态性是Java中的一个重要特性&#xff0c;它允许一个引用类型可以指向多种实际类型的对象&#xff0c;并且可以通过这个引用调用实际对象的方法。多态性主要通过继…

NV-LIO:一种基于法向量的激光雷达-惯性系统(LIO)

论文&#xff1a;NV-LIO: LiDAR-Inertial Odometry using Normal Vectors Towards Robust SLAM in Multifloor Environments 作者&#xff1a;Dongha Chung, Jinwhan Kim NV-LIO&#xff1a;一种基于法向量的激光雷达-惯性系统&#xff08;LIO&#xff09;NV-LIO利用从激光雷…

设计模式基础——设计原则介绍

1.概述 ​ 对于面向对象软件系统的设计而言&#xff0c;如何同时提高一个软件系统的可维护性、可复用性、可拓展性是面向对象设计需要解决的核心问题之一。面向对象设计原则应运而生&#xff0c;这些原则你会在设计模式中找到它们的影子&#xff0c;也是设计模式的基础。往往判…

【全开源】JAVA同城搬家系统源码小程序APP源码

JAVA同城搬家系统源码 特色功能&#xff1a; 强大的数据处理能力&#xff1a;JAVA提供了丰富的数据结构和算法&#xff0c;以及强大的并发处理能力&#xff0c;使得系统能够快速地处理大量的货物信息、司机信息、订单信息等&#xff0c;满足大规模物流的需求。智能路径规划&a…

React hooks - 自定义hooks

自定义hooks 自定义封装鼠标位置的 hook自定义封装秒数倒计时的 hook 在 src 目录下新建 hooks/index.ts 模块&#xff0c;自定义hooks都写在这里&#xff0c;自定义hooks都以use开头 自定义封装鼠标位置的 hook export const useMousePosition (delay:number 0) > {cons…

从华为云Redis到AWS ElastiCache的操作方法

越来越多企业选择出海&#xff0c;那么就涉及到IT系统的迁移&#xff0c;本文将详细介绍如何将华为云Redis顺利迁移到AWS ElastiCache的操作方法&#xff0c;九河云将为您介绍迁移步骤以帮助您顺利完成这一重要任务。 **1. 确定迁移计划** 在开始迁移之前&#xff0c;首先要制…

找到字符串中所有字母异位词-力扣

首先想到的解法时利用滑动窗口&#xff0c;每次匹配一个长度等于p字符串长度的s字符串的子串&#xff0c;然后进行判定&#xff0c;如果是&#xff0c;则将所在位置添加到数组中。 在判断两个字符串是否是字母异位词时&#xff0c;直接copy了之前的代码&#xff0c;整体代码如下…

【OpenHarmony V4.1.1 源码解析 - 000】文章链接汇总

【OpenHarmony V4.1.1 源码解析 - 000】文章链接汇总 Release Note 链接&#xff1a; 《OpenHarmony-v4.1.1-release.md》 《Release-Note》源码下载链接&#xff1a; 《OpenHarmony-v4.1.1-Release.tar.gz》编译环境配置&#xff1a; 《Docker编译环境》