在vue中实现下载文件功能

软工不秃头2024-05-28 17:33

实际操作为，在表格中

我们可以获取到文件的id，通过插槽就可以实现

javascript 复制代码

<template #default="scope">
              <el-button type="text" @click="handleDown(scope.row)">
                <span>下载</span>
              </el-button>
</template>

javascript 复制代码

 handleDown(val){
      const a = document.createElement("a");
      const event = new MouseEvent("click");
      a.download = val.attachmentName;
      a.href = 下载文件的基本url + val.documentId;
      a.dispatchEvent(event);
    },

解析上段代码

const a = document.createElement("a");：创建了一个新的 <a> 元素，该元素用于生成下载链接。

const event = new MouseEvent("click");：创建了一个新的 MouseEvent 对象，该对象用于模拟点击事件。

a.download = val.attachmentName;：将下载链接的文件名设置为 val.attachmentName。

a.href = 下载文件的基本Url + val.documentId;+后面为参数，也就是文件的id

a.dispatchEvent(event);： dispatch 事件，以模拟点击下载链接，从而触发浏览器的下载行为。