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

相关推荐
wenzhangli736 分钟前
Ooder框架8步编码流程实战 - DSM组件UI统计模块深度解析
windows·ui
MoonBit月兔1 小时前
用 MoonBit 打造的 Luna UI:日本开发者 mizchi 的 Web Components 实践
前端·数据库·mysql·ui·缓存·wasm·moonbit
铭毅天下3 小时前
Easysearch UI vs Kibana——可视化工具选型指南
ui
航Hang*5 小时前
Photoshop 图形与图像处理技术——第5章:路径与形状的应用
图像处理·笔记·ui·photoshop
航Hang*17 小时前
Photoshop 图形与图像处理技术——第1章:数字图像基本知识
图像处理·笔记·ui·photoshop
长空任鸟飞_阿康20 小时前
MasterGo AI 实战教程:10分钟生成网页设计图(附案例演示)
前端·人工智能·ui·ai
Xiaobaiforgod1 天前
产品 & UI/UX
ui·产品经理·ux
航Hang*1 天前
Photoshop 图形与图像处理技术——第3章:图像的选择与填充
图像处理·笔记·ui·photoshop
l1m0_1 天前
UI设计规范工程化,AI生成Ant Design设计稿流程拆解
人工智能·ui·产品经理·设计·arco design·设计规范