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

相关推荐
CodeCraft Studio1 天前
Excel处理控件Aspose.Cells教程:如何使用C#在Excel中添加、编辑和更新切片器
ui·c#·excel·aspose·excel切片器·创建表格切片器
海鸥两三2 天前
uniapp 小程序引入 uview plus 框架,获得精美的UI框架
前端·vue.js·ui·小程序·uni-app
UI设计兰亭妙微2 天前
从0到1:兰亭妙微如何用“小程序思维”重构用户体验路径
ui
黄思搏3 天前
Unity坐标转换指南 - 3D与屏幕UI坐标互转
ui·3d·unity
覆东流4 天前
Photoshop合成的核心知识
ui·photoshop
清风wxy4 天前
Duilib_CEF桌面软件实战之Duilib编译与第一个界面程序
c++·笔记·ui·mfc
ftpeak4 天前
《Rust+Slint:跨平台GUI应用》第八章 窗体
开发语言·ui·rust·slint
知识分享小能手4 天前
jQuery 入门学习教程,从入门到精通, jQuery在HTML5中的应用(16)
前端·javascript·学习·ui·jquery·html5·1024程序员节
私人珍藏库5 天前
Adobe Photoshop CS6 Lite:PS极端简化版,压缩后大小仅50M,Photoshop精简版
ui·adobe·photoshop