【vue】前端实现批量导出excel并打包成ZIP

思路：通过Export2Excel的部分方法，获取到blob,再将其转给jszip，完成打包
已将代码封装为一个组件，可通过下方gitee下载
gitee地址：https://gitee.com/mw_666/export-excel-zip

效果截图

压缩包里的Excel

Excel的内容

代码

package.json

"file-saver": "^2.0.5",
"jszip": "^3.7.1",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"xlsx": "^0.17.0",
"script-loader": "^0.7.2"

调用页面

<template>
	<div>
		<div>
			<button @click="exportZip">
				这是导出excel单个sheet的zip
			</button>
			<ZipS :data="data1" :templateId='1' :muBan='muBan1' :zipNames='zipNames' ref="child1"/>
		</div>
		<div>
			<button @click="exportZip2">
				这是导出excel有多个sheet的zip
			</button>
			<ZipS :data="data2" :templateId='2' :muBan='muBan2' :zipNames='zipNames' ref="child2"/>
		</div>
		
		如果需要自定义sheet，到export2Excel中改
	</div>
	
</template>

<script>
	import ZipS from './views/ZipS.vue';
	export default {
		components: {
			ZipS
		},
		data() {
			const that = this;
			return {
				zipNames:['zip黑猫','zip白猫','zip狸花猫'],
				data1:[
					{"黑猫01": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [7.62, 4.43, 5.41, 4.07, 7.67], [660, 93, 205, 96, 510], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "黑猫02": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [5.88, 3.87, 4.59, 3.49, 4.38], [0, 37, 44, 0, 135, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "黑猫03": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [5.88, 3.87, 4.59, 3.49, 4.38], [0, 37, 44, 0, 135, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 1] ], "黑猫04": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [6.68, 4.13, 4.84, 3.89], [455, 81, 157, 85, 523], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "黑猫05": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [7.62, 4.43, 5.41, 4.07, 7.67], [660, 93, 205, 96, 510], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ]},
					{"白猫01": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [7.62, 4.43, 5.41, 4.07, 7.67], [660, 93, 205, 96, 510], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "白猫02": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [5.88, 3.87, 4.59, 3.49, 4.38], [0, 37, 44, 0, 135, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "白猫03": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [5.88, 3.87, 4.59, 3.49, 4.38], [0, 37, 44, 0, 135, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 1] ], "白猫04": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [6.68, 4.13, 4.84, 3.89], [455, 81, 157, 85, 523], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "白猫05": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [7.62, 4.43, 5.41, 4.07, 7.67], [660, 93, 205, 96, 510], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ]},
					{"狸花猫01": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [7.62, 4.43, 5.41, 4.07, 7.67], [660, 93, 205, 96, 510], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "狸花猫02": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [5.88, 3.87, 4.59, 3.49, 4.38], [0, 37, 44, 0, 135, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "狸花猫03": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [5.88, 3.87, 4.59, 3.49, 4.38], [0, 37, 44, 0, 135, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 1] ], "狸花猫04": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [6.68, 4.13, 4.84, 3.89], [455, 81, 157, 85, 523], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "狸花猫05": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [7.62, 4.43, 5.41, 4.07, 7.67], [660, 93, 205, 96, 510], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ]}
				],
				muBan1:['时间', '贮藏', '包装', '性别（男=1，女=0）', '是否养猫（养=1，不养=0）'],
				data2:[
					[ {"黑猫01":{"swdl": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [316.8, 79.2, 283.8, 356.4, 63.8] ], "swgl": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [15.94, 20.29, 12.07, 8.37, 7.42] ], "cft": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [6.38, 8.16, 6.46, 5.54, 5.71], [24.6, 19.35, 19.84, 25.66, 34.46], [5.02, 7.1, 5.41, 4.47, 5.2], [10.96, 10.75, 10.74, 10.72, 10.03], [314.8, 305.6, 307.7, 316.9, 322.9] ] }}, {"黑猫02":{"swdl": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [316.8, 79.2, 283.8, 356.4, 63.8] ], "swgl": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [15.94, 20.29, 12.07, 8.37, 7.42] ], "cft": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [6.38, 8.16, 6.46, 5.54, 5.71], [24.6, 19.35, 19.84, 25.66, 34.46], [5.02, 7.1, 5.41, 4.47, 5.2], [10.96, 10.75, 10.74, 10.72, 10.03], [314.8, 305.6, 307.7, 316.9, 322.9] ] }}, {"黑猫03":{"swdl": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [316.8, 79.2, 283.8, 356.4, 63.8] ], "swgl": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [15.94, 20.29, 12.07, 8.37, 7.42] ], "cft": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [6.38, 8.16, 6.46, 5.54, 5.71], [24.6, 19.35, 19.84, 25.66, 34.46], [5.02, 7.1, 5.41, 4.47, 5.2], [10.96, 10.75, 10.74, 10.72, 10.03], [314.8, 305.6, 307.7, 316.9, 322.9] ] }} ],
					[ {"白猫01":{"swdl": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [316.8, 79.2, 283.8, 356.4, 63.8] ], "swgl": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [15.94, 20.29, 12.07, 8.37, 7.42] ], "cft": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [6.38, 8.16, 6.46, 5.54, 5.71], [24.6, 19.35, 19.84, 25.66, 34.46], [5.02, 7.1, 5.41, 4.47, 5.2], [10.96, 10.75, 10.74, 10.72, 10.03], [314.8, 305.6, 307.7, 316.9, 322.9] ] }}, {"白猫02":{"swdl": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [316.8, 79.2, 283.8, 356.4, 63.8] ], "swgl": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [15.94, 20.29, 12.07, 8.37, 7.42] ], "cft": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [6.38, 8.16, 6.46, 5.54, 5.71], [24.6, 19.35, 19.84, 25.66, 34.46], [5.02, 7.1, 5.41, 4.47, 5.2], [10.96, 10.75, 10.74, 10.72, 10.03], [314.8, 305.6, 307.7, 316.9, 322.9] ] }}, {"白猫03":{"swdl": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [316.8, 79.2, 283.8, 356.4, 63.8] ], "swgl": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [15.94, 20.29, 12.07, 8.37, 7.42] ], "cft": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [6.38, 8.16, 6.46, 5.54, 5.71], [24.6, 19.35, 19.84, 25.66, 34.46], [5.02, 7.1, 5.41, 4.47, 5.2], [10.96, 10.75, 10.74, 10.72, 10.03], [314.8, 305.6, 307.7, 316.9, 322.9] ] }} ],
					[ {"狸花猫01":{"swdl": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [316.8, 79.2, 283.8, 356.4, 63.8] ], "swgl": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [15.94, 20.29, 12.07, 8.37, 7.42] ], "cft": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [6.38, 8.16, 6.46, 5.54, 5.71], [24.6, 19.35, 19.84, 25.66, 34.46], [5.02, 7.1, 5.41, 4.47, 5.2], [10.96, 10.75, 10.74, 10.72, 10.03], [314.8, 305.6, 307.7, 316.9, 322.9] ] }}, {"狸花猫02":{"swdl": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [316.8, 79.2, 283.8, 356.4, 63.8] ], "swgl": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [15.94, 20.29, 12.07, 8.37, 7.42] ], "cft": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [6.38, 8.16, 6.46, 5.54, 5.71], [24.6, 19.35, 19.84, 25.66, 34.46], [5.02, 7.1, 5.41, 4.47, 5.2], [10.96, 10.75, 10.74, 10.72, 10.03], [314.8, 305.6, 307.7, 316.9, 322.9] ] }}, {"狸花猫03":{"swdl": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [316.8, 79.2, 283.8, 356.4, 63.8] ], "swgl": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [15.94, 20.29, 12.07, 8.37, 7.42] ], "cft": [ ["2021-09-15 17:06:34", "2021-09-15 17:36:34", "2021-09-15 18:06:34", "2021-09-15 18:36:34", "2021-09-15 19:06:34"], [6.38, 8.16, 6.46, 5.54, 5.71], [24.6, 19.35, 19.84, 25.66, 34.46], [5.02, 7.1, 5.41, 4.47, 5.2], [10.96, 10.75, 10.74, 10.72, 10.03], [314.8, 305.6, 307.7, 316.9, 322.9] ] }} ],
				],
				muBan2:[
					['时间', '贮藏'],
					['时间', '包装'],
					['时间', '成分', '适应症', '规格', '用法用量', '不良反应']
				]
			}
		},
		methods: {
			exportZip(){
				this.$refs.child1.allExport();
			},
			exportZip2(){
				this.$refs.child2.allExport();
			}
		},
	}
</script>

组件

<template>
	<div class="ExportExcel">
		<div class="loading" v-if="loading.type">
			{{loading.text}}
		</div>
	</div>
</template>

<script>
	import JsZip from 'jszip';
	import {export_blob,export_more_blob} from "./Export2Excel.js";
	export default {
		components: {
			JsZip
		},
		props:{
			data: {
				type: Array,
				default: [
					{"黑猫01": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [7.62, 4.43, 5.41, 4.07, 7.67], [660, 93, 205, 96, 510], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "黑猫02": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [5.88, 3.87, 4.59, 3.49, 4.38], [0, 37, 44, 0, 135, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "黑猫03": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [5.88, 3.87, 4.59, 3.49, 4.38], [0, 37, 44, 0, 135, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 1] ], "黑猫04": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [6.68, 4.13, 4.84, 3.89], [455, 81, 157, 85, 523], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "黑猫05": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [7.62, 4.43, 5.41, 4.07, 7.67], [660, 93, 205, 96, 510], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ]},
					{"白猫01": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [7.62, 4.43, 5.41, 4.07, 7.67], [660, 93, 205, 96, 510], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "白猫02": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [5.88, 3.87, 4.59, 3.49, 4.38], [0, 37, 44, 0, 135, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "白猫03": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [5.88, 3.87, 4.59, 3.49, 4.38], [0, 37, 44, 0, 135, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 1] ], "白猫04": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [6.68, 4.13, 4.84, 3.89], [455, 81, 157, 85, 523], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "白猫05": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [7.62, 4.43, 5.41, 4.07, 7.67], [660, 93, 205, 96, 510], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ]},
					{"狸花猫01": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [7.62, 4.43, 5.41, 4.07, 7.67], [660, 93, 205, 96, 510], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "狸花猫02": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [5.88, 3.87, 4.59, 3.49, 4.38], [0, 37, 44, 0, 135, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "狸花猫03": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [5.88, 3.87, 4.59, 3.49, 4.38], [0, 37, 44, 0, 135, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 1] ], "狸花猫04": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19" ], [6.68, 4.13, 4.84, 3.89], [455, 81, 157, 85, 523], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ], "狸花猫05": [ ["2021-09-15", "2021-09-16", "2021-09-17", "2021-09-18", "2021-09-19"], [7.62, 4.43, 5.41, 4.07, 7.67], [660, 93, 205, 96, 510], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0] ]}
				],
			},
			templateId:{//模板默认为1
				type: Number,
				default: 1,
			},
			muBan:{
				type: Array,
				default: ['时间', '贮藏', '包装', '性别（男=1，女=0）', '是否养猫（养=1，不养=0）'],
			},
			zipNames:{//zip的名字
				type: Array,
				default: ['zip黑猫','zip白猫','zip狸花猫'],
			},
		},
		data() {
			const that = this;
			return {
				loading:{
					type:false,
					text:'我有一只黑色猫'
				},
				paths: [],//excel的所有数据，最终给zip传
				pathName: [],//excel的名字
				tempArrayS: [],//模板2时，遍历里面的数据
			}
		},
		methods: {
			formatJson(filterVal, jsonData) {//模板1时，转数据格式
				return jsonData.map(v => filterVal.map(j => v[j]));
			},
			allExport() {//一键导出
				this.allExportF(0);
			},
			allExportF(_index) {//_index递归递增
				const that = this;
				var loadingName = that.zipNames[_index]!=undefined?'正在导出'+that.zipNames[_index]:'正在合成压缩包';
				that.loading={text: loadingName +'，请耐心等待...',type:true};
				if (that.zipNames[_index]) {
					if (that.templateId == 1) {
						that.export(that.data[_index], 0, that.zipNames[_index], ++_index);
					} else if (that.templateId == 2) {
						that.exportMuban2(that.data[_index], 0, that.zipNames[_index], ++_index);
					}
				}
			},
			export (data, _index, zipName, deepIndex) {// deepIndex判断单击或一键
				const that = this;
				var dataKey = Object.keys(data);
				var key = dataKey[_index];
				if (key) {
					let tempObject = {};
					let tempArray = [];
					const dataLength = data[key].length;

					let filterVal = [];
					data[key][0].forEach((pEle, pIndex) => {
						for (let i = 0; i < dataLength; i++) {
							tempObject[String(i)] = data[key][i][pIndex];
						}
						tempArray.push(tempObject)
						tempObject = {};
					})

					data[key][0].forEach((ele, index) => {
						filterVal.push(index);
					});
					that.paths.push(export_blob(that.muBan, that.formatJson(filterVal, tempArray))); //传blob
					that.pathName.push(key); //excel的名字
					_index++;
					setTimeout(() => {//这里考虑数据量比较大，循环加载这个方法会导致浏览器奔溃，折中的方式，如果还不行，把时间再放大些
						that.export(data, _index, zipName, deepIndex);
					}, 1000);
					if (dataKey.length == _index) { //当长度一致时，向zip塞值
						that.zipOut(that.paths, that.pathName, zipName,deepIndex);
						that.paths = [];
						that.pathName = [];
					}
				}
			},
			exportMuban2(data, _index, zipName, deepIndex) {
				let that = this;
				data.forEach((item,index)=>{
					Object.keys(item).forEach(excelName=>{
						let thisData = item[excelName];
						let keys = Object.keys(thisData);
						keys.forEach((key , keyIndex)=>{
							let tempObject = {};
							let tempArray = [];
							const dataLength = thisData[key].length;
							thisData[key][0].forEach((pEle, pIndex) => {
								for (let i = 0; i < dataLength; i++) {
									tempObject[String(i)] = thisData[key][i][pIndex];
								}
								tempArray.push(tempObject)
								tempObject = {};
							})
							that.tempArrayS.push(tempArray);
							if(keys.length == (keyIndex+1)){
								let obj = [];
								that.tempArrayS.forEach((ele, index) => {
									obj[index] = [];
									ele.forEach((ele2, index2) => {
										var arr = [];
										Object.keys(ele2).forEach((ele3, index3) => {
											arr.push(ele2[ele3])
										})
										obj[index][index2] = arr;
										arr = [];
									})
								})
								that.tempArrayS = [];
								that.paths.push(export_more_blob(that.muBan, obj)); //传blob
								that.pathName.push(excelName); //excel的名字
							}
						})
					})
				})
				setTimeout(() => {//这里考虑数据量比较大，循环加载这个方法会导致浏览器奔溃，折中的方式，如果还不行，把时间再放大些
					that.zipOut(that.paths, that.pathName, zipName,deepIndex);
					that.paths = [];
					that.pathName = [];
				}, 1000);
			},
			zipOut(paths, pathName, zipName, deepIndex) {
				// paths 所有blob
				// pathName 所有excel文件名
				// zipName zip的包名
				// deepIndex 执行ajax下标，当zipOut方法执行完后，再执行allExportF
				const that = this;
				var zip = new JsZip();
				paths.forEach((item, index) => {
					const arr_name = item // 下载文件, 并存成ArrayBuffer对象
					const file_name = pathName[index] + '.xlsx' // 获取文件名
					zip.file(file_name, arr_name, {
						binary: true
					}) // 逐个添加文件
				})
				zip.generateAsync({
						type: 'blob',
					})
					.then(function(content) {
						// 下载的文件名
						var filename = zipName + '.zip'
						// 创建隐藏的可下载链接
						var eleLink = document.createElement('a')
						eleLink.download = filename
						eleLink.style.display = 'none'
						// 下载内容转变成blob地址
						eleLink.href = URL.createObjectURL(content)
						// 触发点击
						document.body.appendChild(eleLink)
						eleLink.click()
						// 然后移除
						document.body.removeChild(eleLink)
						if (deepIndex) {
							that.allExportF(deepIndex); //递归，去执行ajax
							if(that.zipNames.length == deepIndex){
								that.loading.type=false;;
							}
						}
					})
			},
		},
	}
</script>

<style lang="less">
	.loading{position: fixed;top: 0;left: 0;width: 100%;height:100%;display: flex;justify-content: center;align-items: center;z-index: 666;background-color:rgba(0,0,0,0.6) ;    color: white;font-size: 25px;}
</style>

需要引用的js
Export2Excel.js

//Export2Excel.js
/* eslint-disable */
require('script-loader!file-saver');
require('./Blob.js');//转二进制用  这边要写你的blob的实际地址
require('script-loader!xlsx/dist/xlsx.core.min');

function generateArray(table) {
  var out = [];
  var rows = table.querySelectorAll('tr');
  var ranges = [];
  for (var R = 0; R < rows.length; ++R) {
    var outRow = [];
    var row = rows[R];
    var columns = row.querySelectorAll('td');
    for (var C = 0; C < columns.length; ++C) {
      var cell = columns[C];
      var colspan = cell.getAttribute('colspan');
      var rowspan = cell.getAttribute('rowspan');
      var cellValue = cell.innerText;
      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;

      //Skip ranges
      ranges.forEach(function (range) {
        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
        }
      });

      //Handle Row Span
      if (rowspan || colspan) {
        rowspan = rowspan || 1;
        colspan = colspan || 1;
        ranges.push({
          s: {
            r: R,
            c: outRow.length
          },
          e: {
            r: R + rowspan - 1,
            c: outRow.length + colspan - 1
          }
        });
      };

      //Handle Value
      outRow.push(cellValue !== "" ? cellValue : null);

      //Handle Colspan
      if (colspan)
        for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
    }
    out.push(outRow);
  }
  return [out, ranges];
};

function datenum(v, date1904) {
  if (date1904) v += 1462;
  var epoch = Date.parse(v);
  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheet_from_array_of_arrays(data, opts) {
  var ws = {};
  var range = {
    s: {
      c: 10000000,
      r: 10000000
    },
    e: {
      c: 0,
      r: 0
    }
  };
  for (var R = 0; R != data.length; ++R) {
    for (var C = 0; C != data[R].length; ++C) {
      if (range.s.r > R) range.s.r = R;
      if (range.s.c > C) range.s.c = C;
      if (range.e.r < R) range.e.r = R;
      if (range.e.c < C) range.e.c = C;
      var cell = {
        v: data[R][C]
      };
      if (cell.v == null) continue;
      var cell_ref = XLSX.utils.encode_cell({
        c: C,
        r: R
      });

      if (typeof cell.v === 'number') cell.t = 'n';
      else if (typeof cell.v === 'boolean') cell.t = 'b';
      else if (cell.v instanceof Date) {
        cell.t = 'n';
        cell.z = XLSX.SSF._table[14];
        cell.v = datenum(cell.v);
      } else cell.t = 's';

      ws[cell_ref] = cell;
    }
  }
  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
  return ws;
}

function Workbook() {
  if (!(this instanceof Workbook)) return new Workbook();
  this.SheetNames = [];
  this.Sheets = {};
}

function s2ab(s) {
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

export function export_blob(th, jsonData, defaultTitle) {
  var data = jsonData;
  data.unshift(th);
  var ws_name = "自定义的sheet";
  var wb = new Workbook(),
    ws = sheet_from_array_of_arrays(data);
  /* add worksheet to workbook */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;
  var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });

  if (defaultTitle) {//只渲染一个excel
    saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), defaultTitle + ".xlsx")
  } else {//返回多个blob
    var aaa = new Blob([s2ab(wbout)], { type: 'text/plain' });
    return aaa;
  }
};

export function export_more_blob(th, jsonData, defaultTitle) {
  var data = jsonData;
  //添加标题
  for (var i = 0; i < th.length; i++) {
    data[i].unshift(th[i])
  }
  //这里是定义sheet的名称 有几个sheet就加几个
  var ws_name = ["一只黑猫", "两只黑猫", "三只狸花猫"];
  var wb = new Workbook(), ws = [];
  //数据转换
  for (var j = 0; j < th.length; j++) {
    ws.push(sheet_from_array_of_arrays(data[j]))
  }
  /* add worksheet to workbook */
  //生成多个sheet
  for (var k = 0; k < th.length; k++) {
    wb.SheetNames.push(ws_name[k])
    wb.Sheets[ws_name[k]] = ws[k]
  }

  var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });

  if (defaultTitle) {//只渲染一个excel
    saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), defaultTitle + ".xlsx")
  } else {//返回多个blob
    var aaa = new Blob([s2ab(wbout)], { type: 'text/plain' });
    return aaa;
  }
}

export function exportMultiple(thArray, dataArray, sheetNameArray, fileName = "导出的Excel") {

  let ws_name = sheetNameArray;
  let wb = new Workbook();
  let ws = [];
  let filterArray = [];

  const formatJson = function (filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]));
  };

  thArray.forEach((pEle, pIndex) => {
    ws.push([]);
    dataArray[pIndex].unshift(pEle);
    filterArray.push([]);
    pEle.forEach(cEle => {
      filterArray[pIndex].push(cEle.field);
    });
  });

  thArray.forEach((pEle, pIndex) => {
    const data = formatJson(filterArray[pIndex], dataArray[pIndex]);
    ws[pIndex].push(sheet_from_array_of_arrays(data));
    wb.SheetNames.push(ws_name[pIndex]);
    wb.Sheets[ws_name[pIndex]] = ws[pIndex][0];
  });


  let cellKes = []
  for (var i = 0; i < 26; i++) {
    cellKes.push(String.fromCharCode(65 + i));
  }

  let idx = 0;
  ws.forEach((pEle, pIndex) => {
    idx = 0
    thArray[pIndex].forEach(thEle => {
      pEle.forEach(cEle => {
        cEle[cellKes[idx] + 1] = { v: thEle.name, t: "s" }
        idx++;
      });
    });
  });

  let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' });
  saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), fileName + ".xlsx");

}

Blob.js

/* eslint-disable */
/* Blob.js
 * A Blob implementation.
 * 2014-05-27
 *
 * By Eli Grey, http://eligrey.com
 * By Devin Samarin, https://github.com/eboyjr
 * License: X11/MIT
 *   See LICENSE.md
 */

/*global self, unescape */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
 plusplus: true */

/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */

const blob = function (view) {
  "use strict";

  view.URL = view.URL || view.webkitURL;

  if (view.Blob && view.URL) {
    try {
      new Blob;
      return;
    } catch (e) {}
  }

  // Internally we use a BlobBuilder implementation to base Blob off of
  // in order to support older browsers that only have BlobBuilder
  var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function (view) {
    var
      get_class = function (object) {
        return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
      },
      FakeBlobBuilder = function BlobBuilder() {
        this.data = [];
      },
      FakeBlob = function Blob(data, type, encoding) {
        this.data = data;
        this.size = data.length;
        this.type = type;
        this.encoding = encoding;
      },
      FBB_proto = FakeBlobBuilder.prototype,
      FB_proto = FakeBlob.prototype,
      FileReaderSync = view.FileReaderSync,
      FileException = function (type) {
        this.code = this[this.name = type];
      },
      file_ex_codes = (
        "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR " +
        "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
      ).split(" "),
      file_ex_code = file_ex_codes.length,
      real_URL = view.URL || view.webkitURL || view,
      real_create_object_URL = real_URL.createObjectURL,
      real_revoke_object_URL = real_URL.revokeObjectURL,
      URL = real_URL,
      btoa = view.btoa,
      atob = view.atob

      ,
      ArrayBuffer = view.ArrayBuffer,
      Uint8Array = view.Uint8Array;
    FakeBlob.fake = FB_proto.fake = true;
    while (file_ex_code--) {
      FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
    }
    if (!real_URL.createObjectURL) {
      URL = view.URL = {};
    }
    URL.createObjectURL = function (blob) {
      var
        type = blob.type,
        data_URI_header;
      if (type === null) {
        type = "application/octet-stream";
      }
      if (blob instanceof FakeBlob) {
        data_URI_header = "data:" + type;
        if (blob.encoding === "base64") {
          return data_URI_header + ";base64," + blob.data;
        } else if (blob.encoding === "URI") {
          return data_URI_header + "," + decodeURIComponent(blob.data);
        }
        if (btoa) {
          return data_URI_header + ";base64," + btoa(blob.data);
        } else {
          return data_URI_header + "," + encodeURIComponent(blob.data);
        }
      } else if (real_create_object_URL) {
        return real_create_object_URL.call(real_URL, blob);
      }
    };
    URL.revokeObjectURL = function (object_URL) {
      if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
        real_revoke_object_URL.call(real_URL, object_URL);
      }
    };
    FBB_proto.append = function (data /*, endings*/ ) {
      var bb = this.data;
      // decode data to a binary string
      if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
        var
          str = "",
          buf = new Uint8Array(data),
          i = 0,
          buf_len = buf.length;
        for (; i < buf_len; i++) {
          str += String.fromCharCode(buf[i]);
        }
        bb.push(str);
      } else if (get_class(data) === "Blob" || get_class(data) === "File") {
        if (FileReaderSync) {
          var fr = new FileReaderSync;
          bb.push(fr.readAsBinaryString(data));
        } else {
          // async FileReader won't work as BlobBuilder is sync
          throw new FileException("NOT_READABLE_ERR");
        }
      } else if (data instanceof FakeBlob) {
        if (data.encoding === "base64" && atob) {
          bb.push(atob(data.data));
        } else if (data.encoding === "URI") {
          bb.push(decodeURIComponent(data.data));
        } else if (data.encoding === "raw") {
          bb.push(data.data);
        }
      } else {
        if (typeof data !== "string") {
          data += ""; // convert unsupported types to strings
        }
        // decode UTF-16 to binary string
        bb.push(unescape(encodeURIComponent(data)));
      }
    };
    FBB_proto.getBlob = function (type) {
      if (!arguments.length) {
        type = null;
      }
      return new FakeBlob(this.data.join(""), type, "raw");
    };
    FBB_proto.toString = function () {
      return "[object BlobBuilder]";
    };
    FB_proto.slice = function (start, end, type) {
      var args = arguments.length;
      if (args < 3) {
        type = null;
      }
      return new FakeBlob(
        this.data.slice(start, args > 1 ? end : this.data.length), type, this.encoding
      );
    };
    FB_proto.toString = function () {
      return "[object Blob]";
    };
    FB_proto.close = function () {
      this.size = this.data.length = 0;
    };
    return FakeBlobBuilder;
  }(view));

  view.Blob = function Blob(blobParts, options) {
    var type = options ? (options.type || "") : "";
    var builder = new BlobBuilder();
    if (blobParts) {
      for (var i = 0, len = blobParts.length; i < len; i++) {
        builder.append(blobParts[i]);
      }
    }
    return builder.getBlob(type);
  };
}
exports.blob = blob;