element-ui文件下载(单个)

  1. 单个附件下载
javascript 复制代码
<el-button
      type="text"
      size="small"
      @click.native.prevent="download(scope.row)" >下载</el-button>


export default {
    data() {
        return {
            downloadUrl: 'http://127.0.0.1:8881/XX/XX', // 下载接口
        }
    },
    methods: {
        download(row) { // 单个附件下载
              // 下载附件(form方式)
          const params = {
            fileId: row.dataId,
            fileName: row.fileName,
            attachmentId: row.dataId,
            token: getToken()
          }
          this.postDownloadFile(params, this.downloadUrl)

          // downloadFileByToken({ attachmentId: row.dataId }).then((response) => { // 按钮提交无效
          // })
    },
    postDownloadFile(params, url) {
          const form = document.createElement('form')
          form.style.display = 'none'
          form.action = url
          form.method = 'post'
          document.body.appendChild(form)
          // 动态创建input并给value赋值
          for (const key in params) {
            const input = document.createElement('input')
            input.type = 'hidden'
            input.name = key
            input.value = params[key]
            form.appendChild(input)
          }
          form.submit()
          form.remove() 
        },
    },
}

灵感来自:https://blog.csdn.net/ewl0116/article/details/129879216

相关推荐
航Hang*16 小时前
Photoshop 图形与图像处理技术——第9章:实践训练6——滤镜特效
图像处理·笔记·学习·ui·photoshop
小雨下雨的雨17 小时前
鸿蒙PC应用:工程结构解析与配置文件详解
ui·华为·harmonyos·鸿蒙系统
世人万千丶18 小时前
鸿蒙跨端框架 Flutter 学习 Day 3:性能进阶——Iterable 延迟加载与计算流的智慧
学习·flutter·ui·华为·harmonyos·鸿蒙·鸿蒙系统
航Hang*18 小时前
Photoshop 图形与图像处理技术——第9章:实践训练4——图层和蒙版
图像处理·笔记·ui·photoshop·期末·复习
世人万千丶19 小时前
鸿蒙跨端框架 Flutter 学习 Day 3:工程实践——数据模型化:从黑盒 Map 走向强类型 Class
学习·flutter·ui·华为·harmonyos·鸿蒙·鸿蒙系统
航Hang*20 小时前
Photoshop 图形与图像处理技术——第9章:实践训练3——图像修饰和色彩色调的调整
图像处理·笔记·学习·ui·photoshop·期末
低调小一21 小时前
Kotlin Multiplatform + 声明式 UI 三端实战:从工程结构到鸿蒙适配
ui·kotlin·harmonyos
Var_al21 小时前
Unity编辑器扩展:标准化UI组件快速创建工具开发指南
ui·unity·c#·编辑器
未定义.22121 小时前
第7篇:跨端拓展!Playwright+Appium实现Web+移动端全覆盖
python·ui·appium·自动化·jenkins·pytest
UI设计兰亭妙微1 天前
C4D 建模 | 大屏设计 | 交互设计:兰亭妙微 UI 设计,让智慧园区管理 “可视可控”
ui·用户体验设计