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

相关推荐
ZC跨境爬虫1 小时前
跟着 MDN 学 HTML day_17:媒体与 Web Audio API 自动播放指南——策略、检测与最佳实践
前端·笔记·ui·html·音视频·媒体
冬奇Lab2 小时前
一天一个开源项目(第66篇):awesome-design.md - 让 AI 助你打造像素级 UI 的设计规范
人工智能·ui·设计规范
小姑爷2 小时前
微信4.1.5.16 UI树“消失”?UIAutomation实战复现+AI驱动RPA落地方案
人工智能·ui·微信
zdr尽职尽责6 小时前
UI同步屏幕自适应
ui
薛定猫AI7 小时前
【深度解析】Open Design 本地优先 AI 设计系统:用多模型 Agent 生成高保真 UI 原型
人工智能·ui
ZC跨境爬虫9 小时前
跟着 MDN 学 HTML day_18:(HTML 表格进阶特性与无障碍——从标题结构到屏幕阅读器适配)
前端·笔记·ui·html·音视频
苍煜9 小时前
SkyWalking最新实操入门博客:微服务可观测性搭建+原理详解+从零部署+UI使用教程
ui·微服务·skywalking
ZC跨境爬虫10 小时前
跟着 MDN 学 HTML day_16:(音频与视频处理——从画布滤镜到3D沉浸音频的进阶指南)
前端·javascript·ui·3d·html·音视频
ZC跨境爬虫1 天前
跟着 MDN 学 HTML day_15:(媒体缓冲、拖动与时间范围控制)
前端·笔记·ui·html·edge浏览器·媒体
ZC跨境爬虫1 天前
Python Django开发者转向微信小程序:从架构理解到第一行代码的完整准备指南
开发语言·python·ui·微信小程序·django