vue实现文件下载

实现效果图:点击蓝色文字,下载文件

代码实现:

html 复制代码
       <div v-for="(item, index) in form.fileList" :key="index">
         <i class="el-icon-upload" style="color: #c0c4cc; margin-right: 5px"></i>
         <el-link
          type="primary"
          style="font-size: 12px; vertical-align: baseline"
          @click="downloadExcel(item)"
           >{{ item.name }}
         </el-link>  
       </div>                 
javascript 复制代码
    /** 下载模板操作 */
    downloadExcel(row) {
      const a = document.createElement("a");
      a.href = row.path;//下载文件地址;
      a.download = row.name;//下载文件名字;
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      a.remove();
    },
相关推荐
江华森11 分钟前
云原生从0到1:Kubernetes 工作负载实战——Deployment/Service/滚动更新/弹性伸缩
前端·后端
江华森17 分钟前
《云原生从0到1:4台华为云ECS搭建Kubernetes 1.28集群实录(上)——环境与踩坑全记录》
前端·后端
codeY21 分钟前
Vite 前端发布后「点击菜单没反应」?旧版本资源 404 的完整排查与修复实录
前端·前端工程化
90后的晨仔39 分钟前
uni-app Vue3 状态管理 Pinia 完全指南:从概念到实战的深度解析
前端
mqiqe39 分钟前
AgentScope Java 2.0 集成 Chat Completions Web:一行依赖让你的 Agent 变身 OpenAI 兼容服务
java·开发语言·前端
程序员小八77740 分钟前
后端开发初学TypeScript
前端·javascript·typescript
90后的晨仔43 分钟前
Puppeteer 与 Playwright 深度实战指南:从零到精通,全面提升开发效率
前端
sunphp开发者1 小时前
阿里云CDN加速配置问题
前端·阿里云·云计算
小小数媒成员1 小时前
存储器层级结构
java·服务器·前端
单线程121382 小时前
从案例分析 Vue3 Tokenizer 源码
前端·javascript·vue.js