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();
    },
相关推荐
SameX4 分钟前
初识 HarmonyOS Next 的分布式管理:设备发现与认证
前端·harmonyos
M_emory_30 分钟前
解决 git clone 出现:Failed to connect to 127.0.0.1 port 1080: Connection refused 错误
前端·vue.js·git
Ciito34 分钟前
vue项目使用eslint+prettier管理项目格式化
前端·javascript·vue.js
成都被卷死的程序员1 小时前
响应式网页设计--html
前端·html
fighting ~1 小时前
react17安装html-react-parser运行报错记录
javascript·react.js·html
老码沉思录1 小时前
React Native 全栈开发实战班 - 列表与滚动视图
javascript·react native·react.js
abments1 小时前
JavaScript逆向爬虫教程-------基础篇之常用的编码与加密介绍(python和js实现)
javascript·爬虫·python
mon_star°1 小时前
将答题成绩排行榜数据通过前端生成excel的方式实现导出下载功能
前端·excel
Zrf21913184551 小时前
前端笔试中oj算法题的解法模版
前端·readline·oj算法
老码沉思录2 小时前
React Native 全栈开发实战班 - 状态管理入门(Context API)
javascript·react native·react.js