附件展示 点击下载

效果图

实现代码

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对象
      });
    },
相关推荐
独立开阀者_FwtCoder29 分钟前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句40 分钟前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom1 小时前
JavaScript reduce()函数详解
javascript
小飞悟1 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子1 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手1 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
炒毛豆2 小时前
vue3.4中的v-model的用法~
前端·vue.js
前端康师傅2 小时前
JavaScript 中你不知道的按位运算
前端·javascript
tianchang2 小时前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范
best6662 小时前
JavaScript的Math内置对象,到底是何方神圣?
javascript