在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.mzph.cn/news/843008.shtml

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

相关文章

数组基础-笔记

数组是非常基础的数据结构&#xff0c;实现运用和理解是两回事 数组是存放在连续内存空间上的相同类型的数据的集合 可以方便的通过下表索引的方式获取到下标下对应的数据。 举一个字符数组的例子&#xff1a; 注意两点&#xff1a; 数组下标从0开始 数组内存空间的地址是连…

Python的selenium爬取

1.selenium 1.1.前言 使用python的requests模块还是存在很大的局限性&#xff0c;例如&#xff1a;只发一次请求&#xff1b;针对ajax动态加载的网页则无法获取数据等等问题。特此&#xff0c;本章节将通过selenium模拟浏览器来完成更高级的爬虫抓取任务。 1.2.什么是seleniu…

运维开发详解

运维开发&#xff0c;简单来说&#xff0c;就是维护和优化计算机系统、网络以及软件应用正常运行的工作&#xff0c;同时通过编写代码来自动化这些维护任务&#xff0c;提高效率。想象一下&#xff0c;运维就像是照顾一盆植物&#xff0c;你要浇水、施肥、修剪&#xff0c;保证…

Redhat7.4部署MySQL-5.7.17搭建双主互为主从

一、准备工作 需要先准备已经搭建好的两台数据库&#xff0c;并且保证服务器之间网络是通的&#xff0c;3306端口可以相互访问。 二、修改两台数据库my.cnf 配置文件&#xff0c;将下列内容添加进去&#xff0c;放在 [mysqld] 下 我们暂定两台服务器为A服务和B服务&#xff…

【音视频基础概念】颜色与图像

文章目录 前言一、三原色不同三原色的概念三原色的作用 二、颜色空间颜色空间是什么颜色空间的作用常见颜色空间示例灰度图像是什么灰度图像的作用灰度图像的技术细节示例 总结 前言 在当今数字媒体时代&#xff0c;音视频技术在我们的日常生活中占据了重要位置。无论是观看电…

线代与图形学的暧昧二三事

A Swift and Brutal Introduction to Linear Algebra 计算机图形学依赖于线性代数、微积分、统计...物理方面涉及到光学&#xff08;波动光学&#xff1a;不再假设光是直线传播&#xff0c;作为一种光波与物体表面材质进行作用接触&#xff0c;如何生成不同的外观&#xff09;…

npm build报错Cannot find module ‘webpack‘解决方法

目录 一、问题描述二、问题原因三、解决方法 一、问题描述 npm build 报错&#xff1a; Error: Cannot find module webpackRequire stack:- D:\Workspaces\WebstormProjects\yy-cloud\ruoyi-ui\node_modules\compression-webpack-plugin\dist\index.js- D:\Workspaces\Websto…

Xshell 使用

Xshell 使用 ①xshell 安装包 ②xshell 卸载 ③xshell 同时控制多窗口 ①xshell 安装包 Xshell 7 破解版 ②xshell 卸载 第一步: 打开控制面板卸载xshell 第二步: win+R,输入regedit,打开注册表,删除xshell相关注册信息 注册表目录: 在下面两个目录中查找xshell相关…

STM32硬件接口I2C应用(基于BH1750)

目录 概述 1 STM32Cube控制配置I2C 1.1 I2C参数配置 1.2 使用STM32Cube产生工程 2 HAL库函数介绍 2.1 初始化函数 2.2 写数据函数 2.3 读数据函数 3 光照传感器BH1750 3.1 认识BH1750 3.2 BH1750寄存器 3.3 采集数据流程 4 BH1750驱动实现 4.1 接口函数实现 4.2…

AI推介-多模态视觉语言模型VLMs论文速览(arXiv方向):2024.05.20-2024.05.25

文章目录~ 1.LM4LV: A Frozen Large Language Model for Low-level Vision Tasks2.Disease-informed Adaptation of Vision-Language Models3.VDGD: Mitigating LVLM Hallucinations in Cognitive Prompts by Bridging the Visual Perception Gap4.Composed Image Retrieval fo…

vite+js配置

vite js 配置路径 npm install types/node --save-dev vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue //需要引入 import path from path// https://vitejs.dev/config/ export default defineConfig({plugins: [vue()],resolve: {a…

港口与航运3D三维虚拟仿真展区让更多人了解到海洋知识

在短短20天内&#xff0c;搭建起200多家线上3D展厅&#xff0c;听起来似乎是一项艰巨的任务。然而&#xff0c;对于我们的3d云展平台而言&#xff0c;这早已成为常态。连续三年&#xff0c;我们已成功为众多会展公司在短时间内构建出几百家甚至上千家的线上3D展会&#xff0c;见…

简单的利用有限脉冲响应(FIR)滤波器对心电信号进行降噪(Python)

代码很简单。 import numpy as np import matplotlib.pyplot as plt#------------------------Bandstop Filter Function------------------------ def bandstop(M,low,high,Fs):#50Hz removalk1 int( (low/Fs)*M) # index 22k2 int( (high/Fs)*M) # index 27#DC removalk0 …

关于C++的IO流简单总结

基础IO流 C的IO以面向对象的形式实现, 同时兼容了C语言面向过程的IO方式 C 标准库提供了四个基本流对象&#xff1a; cin&#xff1a;用于从标准输入&#xff08;通常是键盘&#xff09;读取数据。 cout&#xff1a;用于向标准输出&#xff08;通常是控制台&#xff09;写入…

怎么使用Stable diffusion中的models

Stable diffusion中的models Stable diffusion model也可以叫做checkpoint model&#xff0c;是预先训练好的Stable diffusion权重&#xff0c;用于生成特定风格的图像。模型生成的图像类型取决于训练图像。 如果训练数据中从未出现过猫的图像&#xff0c;模型就无法生成猫的…

面试八-存泄漏是什么,有哪几种,怎么解决?

一、内存泄漏几种情况 当使用基类指针指向派生类对象时&#xff0c;如果基类的析构函数不是虚函数&#xff0c;那么在使用基类指针来删除这个对象时&#xff0c;只会调用基类的析构函数&#xff0c;而不会调用派生类的析构函数。这就导致了派生类中的资源无法正确释放&#xff…

22公司斩获亚洲品牌经济峰会“亚洲数字化服务领军企业奖”

5月25日&#xff0c;以“亚洲新势力&#xff1a;创新、融合与可持续发展”为主题的亚洲品牌经济峰会2024深圳会议在深圳益田威斯汀酒店举办&#xff0c;本次活动由中国亚洲经济发展协会指导&#xff0c;由亚洲国际品牌研究院主办&#xff0c;旨在搭建品牌创新与经济发展交流平台…

B站pink老师CSS学习(一)

文章目录 一、CSS基础选择器1.标签选择器2.类选择器3. id选择器4.通配符选择器 二、字体属性1.字体2.字体大小3.字体粗细4.文字样式5.复合属性 三、文本属性1.文本颜色2.对齐文本3.装饰文本4.文本缩进5.行间距 四、CSS引入方式1. 内部样式表2.行内样式表3.外部样式表 一、CSS基…

CTF流量分析之wireshark使用

01.基本介绍 在CTF比赛中&#xff0c;对于流量包的分析取证是一种十分重要的题型。通常这类题目都是会提供一个包含流量数据的pcap文件&#xff0c;参赛选手通过该文件筛选和过滤其中无关的流量信息&#xff0c;根据关键流量信息找出flag或者相关线索。 pcap流量包的分析通常…

响应式页面布局处理-一篇打尽

纯pc端响应式 pc端平常用到的响应式布局 大致就如下三种&#xff0c;当然也会有其他方法&#xff0c;欢迎评论区补充 将div height、width设置成100% flex布局 flex布局主要是将flex-wrap: wrap&#xff0c; 最后&#xff0c;你可以通过给子元素设置 flex 属性来控制它们的…