【VUE】点击按钮下载全部链接文件

最新推荐文章于 2025-01-14 09:26:51 发布

墨如初见

最新推荐文章于 2025-01-14 09:26:51 发布

阅读量1.2k

点赞数 9

分类专栏： # vue 文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/Ls66666Ls/article/details/135650291

版权

文章介绍了如何在Vue应用中使用异步函数处理多个文件下载，包括使用`fetch`和`blob`技术以及创建`a`标签进行单文件下载。还提及了在原窗口和新窗口展示数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.VUE，点击下载全部文件按钮，将多个链接直接下载

// 按钮
<el-button type="info" @click="downloadAllUrls">下载全部文件</el-button>
// 方法，在methods中写方法
 methods: {
	async downloadAllUrls(){
	let tableData = ['http://123','http://123','http://123'];
      for (let link of tableData) {
        await this.downloadFile(link);
      }
    },
    async downloadFile(url) {
      const response = await fetch(url);
      const blob = await response.blob();
      const urlObject = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = urlObject;
      link.setAttribute('download', url.substring(url.lastIndexOf('/') + 1));
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
}

二.单个文件下载直接用a标签

// 打开一个新窗口
<a style="color:blue;text-decorati

最低0.47元/天解锁文章