前端提效 - js 批量导出 excel 为zip压缩包
本篇文章主要介绍使用 exceljs、file-saver、jszip实现下载包含多层级文件夹、多个 excel、每个 excel 支持多个 sheet 的 zip 压缩包。
上一篇文章：前端复杂表格导出excel，一键导出 Antd Table 看这篇就够了（附源码）详细介绍了如何实现解析 Antd Table、组装数据和调整表格的样式，感兴趣的可以先看看。
本篇将接着上一篇，重点讲方法的更高级抽象，和下载多层级文件夹的 zip 压缩包。
源码地址：https://github.com/cachecats/excel-export-demo
实现效果
最终下载的是 压缩包.zip，解压之后包含多个文件夹，每个文件夹下又可以无限嵌套子文件夹，excel 文件可以自由选择放到根目录下，或者子文件夹下。
实现效果如图：
使用方法
使用方式也很简单，经过高度封装后，只需按照方法参数的规则传入参数即可：
downloadFiles2ZipWithFolder({
zipName: '压缩包',
folders: [
{
folderName: '文件夹1',
files: [
{
filename: 'test',
sheets: [{
sheetName: 'test',
columns: columns,
dataSource: list
}]
},
{
filename: 'test2',
sheets: [{
sheetName: 'test',
columns: columns,
dataSource: list
}]
},
]
},
{
folderName: '文件夹2',
files: [
{
filename: 'test',
sheets: [{
sheetName: 'test',
columns: columns,
dataSource: list
}]
},
{
filename: 'test2',
sheets: [{
sheetName: 'test',
columns: columns,
dataSource: list
}]
},
]
},
{
folderName: '文件夹2/文件夹2-1',
files: [
{
filename: 'test',
sheets: [{
sheetName: 'test',
columns: columns,
dataSource: list
}]
},
{
filename: 'test2',
sheets: [{
sheetName: 'test',
columns: columns,
dataSource: list
}]
},
]
},
{
folderName: '文件夹2/文件夹2-1/文件夹2-1-1',
files: [
{
filename: 'test',
sheets: [{
sheetName: 'test',
columns: columns,
dataSource: list
}]
},
{
filename: 'test2',
sheets: [{
sheetName: 'test',
columns: columns,
dataSource: list
}]
},
]
},
{
folderName: '',
files: [
{
filename: 'test',
sheets: [{
sheetName: 'test',
columns: columns,
dataSource: list
},
{
sheetName: 'test2',
columns: columns,
dataSource: list
}
]
},
{
filename: 'test2',
sheets: [{
sheetName: 'test',
columns: columns,
dataSource: list
}]
},
]
}
]
})
这里会封装三个方法，分别满足不同场景下的导出需求：
downloadExcel：导出普通的单文件 excel，预设样式，可包含多个 sheet。downloadFiles2Zip：将多个 excel 文件导出到一个 zip 压缩包内，没有嵌套文件夹。