首页 > 其他分享 >vue实现下载附件功能

vue实现下载附件功能

时间:2023-12-08 14:13:21浏览次数:33  
标签:vue item download link 附件 let 下载

两种方式下载:

第一种:直接a标签下载

<a class="item-btn download" :href="'/xxx/xxx/download?id=' + xxx.id" :download="xxx.name">下载附件</a>

第二种: 

<el-button class="item-btn download" @click="downloadEnclosure(fileUrl, fileName)">下载附件</el-button>
  // 下载附件
    async downloadEnclosure(url, name) {
      let response = await fetch(url)
      let blob = await response.blob()
      let objectUrl = window.URL.createObjectURL(blob)
      let a = document.createElement('a')
      a.href = objectUrl
      a.download = name
      a.click()
      a.remove()
    },

 

注: a标签通过js创建的方式:

handleClick(item){
  const fileUrl = `/xxx/xxx/download?id=${item.id}`
   const link = document.createElement('a')
   link.className = 'download_btn'
   link.href = fileUrl
   link.setAttribute('download',item.name)
   link.click()
   link.remove()
}

 

标签:vue,item,download,link,附件,let,下载
From: https://www.cnblogs.com/anna001/p/17887041.html

相关文章

  • Frida server 和 python client下载
    前言全局说明Fridaserver和pythonclient下载安装一、相关连接server下载:最新版:https://github.com/frida/frida/releases15.2.2版:https://github.com/frida/frida/releases/tag/15.2.216.0.1版:https://github.com/frida/frida/releases/tag/16.0.1Pythonclient下载......
  • Vue学习计划-Vue2--Vue核心(五)条件、列表渲染、表单数据
    1.条件渲染v-ifv-if="表达式"v-else-if="表达式"v-else="表达式"适用于:切换频率较低的场景特点:不显示dom元素,直接被删除注意:v-if和v-else-if、v-else一起使用,但要求结构不能被打断v-if和template一起使用,v-show不可以v-showv-show="表达式"适用于:切换频......
  • vue-quill富文本编辑器实现图片缩放
    安装环境官网:https://vueup.github.io/vue-quill/guide/modules.htmlnpm安装:npminstall@vueup/vue-quill@latest--savepnpm安装:pnpmadd@vueup/vue-quill@latest安装模块quill-blot-formatternpm:npminstall--savequill-blot-formatterpnpm:npmaddquill-blot-form......
  • Windows服务器,通过Nginx部署VUE+Django前后端分离项目
    目录基本说明安装Nginx部署VUE前端部署Django后端Djangoadmin静态文件(CSS,JS等)丢失的问题1.基本说明本文介绍了在windows服务器下,通过Nginx部署VUE+Django前后端分离项目。本项目前端运行在80端口,服务器端运行在8000端口。因此本项目使用Django的......
  • C# 本地文件的上传和下载
    本文主要介绍一下,在APS.NET中文件的简单上传于下载,上传是将文件上传到服务器的指定目录下,下载是从存入数据库中的路径,从服务器上下载。1.上传文件(1)页面代码<tablealign="center"cellpadding="0"cellspacing="0"width="100%"><tr>......
  • vue中this.$refs的使用方法和遇到的问题
    this.$refs:用于操作真实的DOM节点。 在开发时碰到了一个小需求,需要子组件向父组件传参,而且是不需要通过事件传递的,一开始使用this.$emit()来写的,但是一直没有接受到参数,于是放弃了使用this.$emit()的使用。 于是,使用了在父组件中调用子组件的方法,来获取传递的参数。 一.......
  • mongdb数据库下载与安装
    mongdb数据库下载与安装前言:不支持WindowsXP系统最好不要安装最新版本下载以及安装:mongdb安装https://www.mongodb.com/try/download/community傻瓜式安装,这里不过多叙述,只需注意下述几点!记得去高级系统设置查看是否配置,我的配置路径为D:\MongoDB\Server\4.4\bin......
  • vue-django 前端bootstrap配置
    2、前端引入bootstrap下载bootstrap源码,放在vue中的src目录中https://v5.bootcss.com/docs/getting-started/download/https://getbootstrap.net/docs/getting-started/introduction/在vue根目录修改main.jsimport{createApp}from'vue'importAppfrom'./App.vue'im......
  • OpenTiny Vue 3.12.0 发布:文档大优化!增加水印和二维码两个新组件
    你好,我是Kagol。非常高兴跟大家宣布,2023年11月30日,OpenTinyVue发布了v3.12.0......
  • 手把手教你如何下载小鹅通上已购买的视频课程
    前言:很多同学都想知道小鹅通中视频课程怎么下载,但是小鹅通上面已购买的视频课程是不提供直接下载方式的,所以下面就教大家如何用学无止下载器下载小鹅通上面已购买的视频课程。一、电脑网页打开小鹅通官网(https://study.xiaoe-tech.com),找到已购买的课程二、找到想要下载的课程,点......