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);//把你拼接的请求地址传到这个函数中
	   		}
	 	},
	}
}

由此可以完成此功能，可以连续下载，喜欢就点个赞吧！