Vue 点击按钮下载txt文件

话不多少,直接上代码!!!

1.第一步,页面中给一个标签添加点击事件

<div @click="downloadFile(item.ARCHIVE_PATHS)" style="color:#409eff">下载</div>

//注释
src:txt的网络路径
<div @click="downloadFile(src)" style="color:#409eff">下载</div>

2.在methods中创建函数

// 下载txt
downloadFile(url) {
  //url点击时间传过来的路径
  const link = document.createElement("a");
  fetch(HOST + url)
    //因为我的url是--->sheepFiles/79819a1de6b46766f5/abv.txt
    //没有服务器地址所以需要拼上服务器地址 HOST
    //拼接后--->http://www.xx.net/sheep/sheepFiles/79819a1de6b46766f5/abv.txt
    .then((res) => res.blob())
    .then((blob) => {
      // 将链接地址字符内容转变成blob地址
      link.href = URL.createObjectURL(blob);
      // console.log(link.href)
      link.download = "";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
},

3.然后就完成了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值