ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

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

2026/8/6 19:46:06 拓冰建站 浏览量
【VUE】点击按钮下载全部链接文件

一.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-decoration:underline;" :href="scope.row.url" target="_blank" class="buttonText">{{url}}</a>

三.其他信息记录

  1. 在原先窗口打开整个页面:
	document.write(response.data);
  1. 另起一个窗口打开页面
// 在获取到response.data后
// 使用window.open()方法重新打开一个新窗口并显示response.data的内容
var newWindow = window.open();
newWindow.document.write(response.data);