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();
    },
相关推荐
JefferyXZF17 分钟前
Next.js Server Actions 详解: 无缝衔接前后端的革命性技术(八)
前端·全栈·next.js
JohnYan1 小时前
工作笔记 - CentOS7环境运行Bun应用
javascript·后端·容器
芜青2 小时前
HTML+CSS:浮动详解
前端·css·html
SchuylerEX2 小时前
第六章 JavaScript 互操(2).NET调用JS
前端·c#·.net·blazor·ui框架
东风西巷3 小时前
Rubick:基于Electron的开源桌面效率工具箱
前端·javascript·electron·软件需求
探码科技3 小时前
AI知识管理软件推荐:九大解决方案与企业应用
前端·ruby
编程小黑马3 小时前
解决flutter 在控制器如controller 无法直接访问私有类方法的问题
前端
Miracle_G3 小时前
每日一个知识点:JavaScript 箭头函数与普通函数比较
javascript
unfetteredman3 小时前
Error: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.32' not found
前端·javascript·vite
云存储小精灵4 小时前
Dify x 腾讯云 COS MCP:自然语言解锁智能数据处理,零代码构建 AI 新世界
前端·开源