在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.rhkb.cn/news/329624.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机毕业设计 | springboot+vue汽车修理管理系统 汽修厂系统(附源码)

1&#xff0c;项目背景 在如今这个信息时代&#xff0c;“汽车维修管理系统” 这种维修方式已经为越来越多的人所接受。在这种背景之下&#xff0c;一个安全稳定并且强大的网络预约平台不可或缺&#xff0c;在这种成熟的市场需求的推动下&#xff0c;在先进的信息技术的支持下…

网络协议——Modbus-TCP

目录 1、简介 2、Modbus-TCP与Modbus-RTU的区别 3、消息格式 4、功能码01H 5、功能码02H 6、功能码03H 7、功能码04H 8、功能码05H 9、功能码06H 10、功能码0FH 11、功能码10H 1、简介 Modbus-TCP&#xff08;Modbus Transmission Control Protocol&#xff09;是一…

嵌入式学习——3——TCP-UDP 数据交互,握手,挥手

1、更新源 cd /etc/apt/ sudo cp sources.list sources.list.save 将原镜像备份 sudo vim sources.list 将原镜像修改成阿里源/清华源&#xff0c;如所述 阿里源 deb http://mirrors.aliyun.com/ubuntu/ bionic main …

【qt】QListWidget 组件

QListWidget 组件 一.QListWidget的用途二.界面设计三.QListWidget的添加1.界面添加2.代码添加 四.列表项的设置1.文本2.图标3.复选框4.列表大小 五.字体和图标的设置1.字体&#xff1a;2.图标&#xff1a; 六.设置显示模式1.图标2.列表 七.其他功能实现1.删除2.全选3.反选4.ad…

小微企业管理系统如何选择等保服务?

小微企业在选择等保&#xff08;信息安全等级保护&#xff09;服务时&#xff0c;应当考虑以下几个关键点以确保既能符合法规要求&#xff0c;又能在成本效益上做出合理决策&#xff1a; 了解等保需求&#xff1a;首先&#xff0c;小微企业需要了解自身的业务性质和信息系统的重…

30.包名的修改和新建后端模块

权限和第三方登录确实令人头疼,我们来学一点简单一点的。 另外,如果各位有属于自己的域名和ICP/IP备案,布置一个作业,自行实现第三方QQ登录。 我们所说的包名修改,是一次性修改ruoyi的全部包名,因为发现很多人有这样的需求,下载别人的代码,想要改成自己公司的包名,结…

深入Django项目实战与最佳实践

title: 深入Django项目实战与最佳实践 date: 2024/5/19 21:41:38 updated: 2024/5/19 21:41:38 categories: 后端开发 tags: Django 基础项目实战最佳实践数据库配置静态文件部署高级特性 第一章&#xff1a;Django项目架构与设计原则 Django框架概述 Django是一个高级的P…

上位机图像处理和嵌入式模块部署(mcu的按键输入)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 做技术的同学&#xff0c;大部分都会把精力放在技术本身&#xff0c;却忽视了学的东西有什么实际的用途。就拿gpio来说&#xff0c;一般我们点灯也…

递归的例子

例1&#xff1a;阶乘函数 #include<iostream> using namespace std; int f(int n) {if(n0)return 1;elsereturn f(n-1)*n; } int main() {int n;cin>>n;cout<<f(n);return 0; }例2&#xff1a;Fibonacci数列 无穷数列1&#xff0c;1&#xff0c;2&#xff0…

计算机-编程相关

在 Linux 中、一切都是文件、硬件设备是文件、管道是文件、网络套接字也是文件。 for https://juejin.cn/post/6844904103437582344 fork 进程的一些问题 fork 函数比较特殊、一次调用会返回两次。在父进程和子进程都会返回。 每个进程在内核中都是一个 taskstruct 结构、for…

Python函数进阶:四大高阶函数、匿名函数、枚举、拉链与递归详解

系列文章目录 Python数据类型&#xff1a;编程新手的必修课深入探索Python字符串&#xff1a;技巧、方法与实战Python 函数基础详解Python正则表达式详解&#xff1a;掌握文本匹配的魔法Python文件操作宝典&#xff1a;一步步教你玩转文件读写Python面向对象基础与魔法方法详解…

实验五:实现循环双链表各种基本运算的算法

实验五&#xff1a;实现循环双链表各种基本运算的算法 一、实验目的与要求 目的:领会循环双链表存储结构和掌握循环双链表中各种基本运算算法设计。 内容:编写一个程序cdinklist.cpp,实现循环双链表的各种基本运算和整体建表算法(假设循环双链表的元素类型ElemType为char),并…

【加密与解密(第四版)】第十七章笔记

第十七章 软件保护技术 17.1 防范算法求逆 17.2 抵御静态分析 反汇编算法&#xff1a;线性扫描&#xff08;无法正确地将代码和数据分开&#xff09;、递归进行 巧妙构造代码和数据&#xff0c;在指令流中插入很多“数据垃圾"&#xff0c;干扰反汇编软件的判断&#xf…

百度手机号登录iApp源码V3

本源码直接对接百度网页版登录接口&#xff0c;无需跳转第三方APP或者网页&#xff0c;可直接进行输入手机号获取验证码的步骤&#xff0c;登录后可获取到用户的UID&#xff0c;名称&#xff0c;BDUSS&#xff0c;PTOKEN&#xff0c;STOKEN&#xff0c;头像直链。 源码下载&…

若依nodejs版本过高问题解决方案

由于nodejs版本过高,可能会导致vue-cli项目运行报错。 目录 方法1:每次启动项目前,输入配置命令 方法2:修改package.js

docker 网络模式

四种模式介绍 宿主机可上网,容器内便可上网.且能ping通宿主机同网段服务 Docker网络模式 配置 说明 host模式 --nethost 容器和宿主机共享Network namespace。 container模式 --netcontainer:NAME_or_ID 容器和另外一个容器共享Network namespace。 kubernetes中的pod…

【DevOps】深入浅出:Jenkins 性能监控全解析

目录 一、监控指标&#xff1a;把握系统健康状况 1、资源利用率&#xff1a; 2、 任务执行效率&#xff1a; 3、系统稳定性&#xff1a; 二、监控工具&#xff1a;选择合适的利器 1、Jenkins 内置监控 1.1、Jenkins Performance Plugin&#xff1a;系统性能指标的直观展…

性能测试工具

性能测试工具 1.Jmeter 环境搭建1.安装JDK2.安装Jmeter1.下载2.安装3.环境配置 3.Jmeter 文件目录介绍1.bin目录2.docs 目录3.printable_docs目录4.lib目录 4.修改默认配置1.汉化配置2.修改主题 5.元件的基本介绍6.元件的作用域作用域的原则 7.元件的执行顺序 1.Jmeter 环境搭建…

登录安全分析报告:创蓝云智注册

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

ubuntu22.04下 easyconnect+输入法安装

先使用对应ubuntu版本的easyconnect安装 sudo dpkg -i EasyConnect_x64_7_6_7_3.deb 下载压缩包servicePack&#xff0c;并解压缩 cd 下载路径/servicePack sudo cp * /usr/share/sangfor/EasyConnect/ 打开easyConnect /usr/share/sangfor/EasyConnect/EasyConnect 此处…