Vue 点击按钮下载txt文件

话不多少，直接上代码！！！1.第一步，页面中给一个标签添加点击事件<div @click="downloadFile(item.ARCHIVE_PATHS)" style="color:#409eff">下载</div>//注释src:txt的网络路径<div @click="downloadFile(src)" style="color:#409eff">下载

前端劝退大师

4411人浏览 · 2022-05-06 19:28:53

前端劝退大师 · 2022-05-06 19:28:53 发布

话不多少，直接上代码！！！

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.然后就完成了