当前位置: 首页 > news >正文

在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 事件,以模拟点击下载链接,从而触发浏览器的下载行为。
http://www.lryc.cn/news/351442.html

相关文章:

  • 文件中海量数据的排序
  • java项目之视频网站系统源码(springboot+vue+mysql)
  • 262 基于matlab的一级倒立摆仿真
  • 智能无网远控再升级 向日葵Q2Pro升级版发布
  • 2024电工杯A题详细思路代码分析数学建模:园区微电网风光储协调优化配置
  • Docker搭建mysql性能测试环境
  • 关于开启直连v2rayn代理Fiddler Charles bp抓包失败问题
  • Python 爬虫编写入门
  • Linux网络编程(socket)
  • 以太坊(3)——智能合约
  • 【Python设计模式03】简单工厂模式
  • java中的Collections类+可变参数
  • SpringBoot集成腾讯云敏感词校验API流程
  • android 避免混淆类名和方法名,但是方法内容需要被混淆
  • 通过ELRepo修改CentOS 7内核版本的详细步骤
  • C++开源库glog使用封装--自定义日志输出格式,设置日志保留时间
  • linux rc.local不生效
  • ROS2入门21讲__第07讲__节点:机器人的工作细胞
  • k8s node NotReady后会发生什么?
  • uni-starter创建App项目最全流程(日后还有其他功能会不断更新)
  • 动态IP和静态IP区别
  • 蓝牙(2):BR/EDR的连接过程;查询(发现)=》寻呼(连接)=》安全建立=》认证=》pair成功;类比WiFi连接过程。
  • 源码部署EFK
  • CSDN智能总结助手
  • setImmediate是在当前事件循环的所有周期的末尾执行,还是再当前事件循环的当前周期的下一个周期执行?
  • 建材行业工程设计资质动态核查不通过怎么办
  • 二叉数之插入操作
  • 【Python】全局变量与init的区别
  • JAVA学习-练习试用Java实现“位1的个数”
  • HTML静态网页成品作业(HTML+CSS)——魅族商城首页网页(1个页面)