附件展示 点击下载

效果图

实现代码

javascript 复制代码
<el-table-column prop="attachment"  label="合同附件" width="250" show-overflow-tooltip>
            <template slot-scope="scope">
              <div v-if="scope.row.cceedcAppendixInfoList &&
                scope.row.cceedcAppendixInfoList.length > 0
                ">
                <el-button type="text" size="small" v-for="(val, key, i) in scope.row.cceedcAppendixInfoList" :key="i"
                  @click.native.prevent="downContractFile(val)">{{ val.appendixOriginalName }}</el-button>
              </div>
              <div v-else>
                <span>暂无</span>
              </div>
            </template>
          </el-table-column>
javascript 复制代码
    downContractFile(val) {
      request({
        url: "/appendix/downloadFile",
        method: "get",
        params: {
          appendixStorageName: val.appendixStorageName,
          appendixOriginalName: val.appendixOriginalName,
        },
        responseType: "blob",
      }).then((res) => {
        var filename = val.appendixOriginalName;
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(new Blob([res])); //创建下载的链接
        downloadElement.href = href;
        downloadElement.setAttribute("download", filename);
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
相关推荐
nightunderblackcat24 分钟前
新手向:从零理解LTP中文文本处理
前端·javascript·easyui
User:你的影子31 分钟前
WPF ItemsControl 绑定
开发语言·前端·javascript
小程序设计41 分钟前
【springboot+vue】高校迎新平台管理系统(源码+文档+调试+基础修改+答疑)
vue.js·spring boot·后端
会有钱的-_-1 小时前
基于webpack的场景解决
前端·vue.js·webpack·安全性测试
知识分享小能手1 小时前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
召摇2 小时前
NodeBB 深度解析:现代论坛系统的架构设计与实践指南
前端·javascript
Abadbeginning2 小时前
FastSoyAdmin centos7云服务器+宝塔部署
vue.js·后端·python
哆啦A梦15882 小时前
uniapp分包实现
前端·vue.js·uni-app·vue3
flower_tomb2 小时前
对浏览器事件机制的理解
前端·javascript·vue.js
超人不会飛2 小时前
仿豆包 H5应用核心模板:用Vue快速复刻大模型对话体验
前端·javascript·vue.js