【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>
三.其他信息记录
- 在原先窗口打开整个页面:
document.write(response.data);
- 另起一个窗口打开页面
// 在获取到response.data后
// 使用window.open()方法重新打开一个新窗口并显示response.data的内容
var newWindow = window.open();
newWindow.document.write(response.data);