Vue 点击按钮下载txt文件

最新推荐文章于 2024-08-28 17:48:43 发布

原创最新推荐文章于 2024-08-28 17:48:43 发布 · 4.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

这篇博客介绍了如何在前端使用JavaScript实现点击按钮下载TXT文件的功能。通过创建隐藏的`<a>`标签，利用fetch获取文件Blob，然后设置下载链接并触发点击完成文件下载。

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

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