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

相关推荐
程序媛_MISS_zhang_01104 小时前
vant-ui中List 组件可以与 PullRefresh 组件结合使用,实现下拉刷新的效果
java·linux·ui
霍格沃兹测试学院-小舟畅学11 小时前
AI智能体实现自主化UI回归测试全解析 Playwright+MCP
人工智能·ui
MediaTea1 天前
Photoshop 调整命令使用详解(合集 · 2026版)
ui·photoshop
霍格沃兹测试开发学社测试人社区1 天前
揭开帷幕:如何实现UI回归测试的全面自主化
人工智能·ui·自动化
半吊子全栈工匠2 天前
软件产品的10个UI设计技巧及AI 辅助
人工智能·ui
Vanranrr2 天前
表驱动编程实战:让 UI 逻辑既清晰又好维护
c++·ui
lsp程序员0103 天前
使用 Web Workers 提升前端性能:让 JavaScript 不再阻塞 UI
java·前端·javascript·ui
咖啡の猫3 天前
PC 端常用 UI 组件库
ui
我的xiaodoujiao3 天前
使用 Python 语言 从 0 到 1 搭建完整 Web UI自动化测试学习系列 25--数据驱动--参数化处理 Excel 文件 2
前端·python·学习·测试工具·ui·pytest
top_designer3 天前
Firefly 样式参考:AI 驱动的 UI 资产“无限”生成
前端·人工智能·ui·aigc·ux·设计师