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

相关推荐
samroom3 小时前
【鸿蒙应用开发 Dev ECO Studio 5.0版本】从0到1!从无到有!最全!计算器------按钮动画、滑动退格、中缀表达式转后缀表达式、UI设计
数据结构·ui·华为·typescript·harmonyos·鸿蒙
之歆7 小时前
Element Plus 深度解析 - 企业级 UI 组件库的设计与实践
ui·element plus
AI_零食8 小时前
开源鸿蒙跨平台Flutter开发:研究生科研贡献雷达矩阵架构
学习·flutter·ui·华为·矩阵·开源·harmonyos
Dontla8 小时前
Playwright有头模式Headed Mode(正常显示UI界面)与无头模式Headless Mode(浏览器在后台运行)介绍
ui
希望上岸的大菠萝9 小时前
HarmonyOS 6.0 极简 UI 设计系统实战 - 基于「今天空白」当前 UiTokens 拆颜色、间距与样式约束
ui·华为·harmonyos
stevenzqzq9 小时前
架构设计深度解析:策略模式 + 抽象工厂在UI适配中的高级应用
ui·策略模式
sycmancia10 小时前
Qt——计算器示例(用户界面与业务逻辑的分离)
开发语言·qt·ui
AI_零食10 小时前
开源鸿蒙跨平台Flutter开发:生物力学与力量周期-臂力训练矩阵架构
学习·flutter·ui·华为·矩阵·开源·harmonyos
FlDmr4i281 天前
使用Gemini3+ui-ux-pro-max skill开发款查询本地ip插件
tcp/ip·ui·ux
宇擎智脑科技1 天前
Claude Code 源码分析(七):终端 UI 工程 —— 用 React Ink 构建工业级命令行界面
前端·人工智能·react.js·ui·claude code