vue多文件下载
首先我们要有多文件下载的选择框,如果不知道怎么去做可以去看一下Element组件,链接: https://element.eleme.cn/#/zh-CN/component/table.去这里面表格里面找到你需要的多选表格,在这里不做过多描述。
按照链接中所说就可以完成多选框,这里数组中要看自己是什么类型数据,吧你的类型写入数组中
vue截图实现批量下载文件功能
根据自己的需求修改
<el-button @click="toggleSelection([])" type="primary" size="mini" icon="el-icon-download" @click="download"></el-button>
<el-button @click="toggleSelection()" size="mini" type="primary" icon="el-icon-close"></el-button>
代码:可复制粘贴完成此功能
export const downloadFile = (url) => {
const iframe = document.createElement("iframe");
iframe.style.display = "none"; // 防止影响页面
iframe.style.height = 0; // 防止影响页面
iframe.src = url;
document.body.appendChild(iframe); // 这一行必须,iframe挂在到dom树上才会发请求
// 5分钟之后删除(onload方法对于下载链接不起作用)
setTimeout(()=>{
iframe.remove();
}, 5 * 60 * 1000);
}
export default {
data() {
return {
multipleSelection:[],
}
},
methods: {
download(){
console.log(this.multipleSelection)
for(var i =0;i<this.multipleSelection.length;i++){ //循环遍历调用downloadFile方法
const url = 'data' +'/'+ this.multipleSelection[i];//data是你的请求地址的文件名字
downloadFile(url);//把你拼接的请求地址传到这个函数中
}
},
}
}