vue2项目使用exceljs多表头导出功能详解
作者：qq_41282779
ExcelJS是一个用于在Node.js和浏览器中创建、读取和修改Excel文件的强大JavaScript库,下面这篇文章主要给大家介绍了关于vue2项目使用exceljs多表头导出功能的相关资料,需要的朋友可以参考下
前言
因为项目需求要用到前端导出功能，粗略比较了几个导出插件之后，决定使用exceljs插件，至少能够满足样式、数据格式等的需求。
鉴于个人水平和时间限制，目前只是初步实现了组件化，将表头、数据按要求格式传递到组件中即可导出需要的excel文件。代码质量、实现思路存在一定的缺陷，后续有时间会继续优化，如果大家有更好的实现，感谢留言！
组件导出文件效果如下：
一级表头
二级表头
三级表头
一、插件安装
yarn add exceljs yarn add file-saver
二、数据准备
1、前台表格表头数据
const data = [
{
prop: "AA",
label: "地区",
minWidth: "150px"
},
{
prop: "BB",
label: "归集额",
minWidth: "100px"
},
{
label: "对下调入",
children: [
{
prop: "CC",
label: "资金",
minWidth: "90px"
},
{
prop: "DD",
label: "占比",
minWidth: "80px"
},
],
},
{
label: "本级调入",
children: [
{
prop: "EE",
label: "资金",
minWidth: "100px"
},
{
prop: "FF",
label: "占比",
minWidth: "80px"
}
]
}
]2、传递到组件前的数据处理
// 表头数据预处理函数
const headersPreprocess = function (businessAttr) {
let columns = deepClone(businessAttr);
let maxLevel = 0;
let baseCols = [];
function columnsProcess(columns = [], level = 0, path = "") {
++level;
maxLevel = maxLevel < level ? level : maxLevel;
for (let i = 0; i < columns.length; i++) {
// 获取列的路径，用于后面表头数据格式处理
columns[i].path = emptyCheck(path) ? path + "_" + columns[i].label : columns[i].label;
columnProcess(columns[i]);
if (columns[i].children) {
columnsProcess(columns[i].children, level, columns[i].path);
} else {
baseCols.push({
prop: columns[i].prop, // 当前字段的prop值
path: columns[i].path, // 当前字段的路径
level: level, // 当前列所处层级
width: columns[i].width || columns[i].minWidth, // 列宽
});
delete columns[i].path;
}
}
}
columnsProcess(columns, 0);
return {
columns: columns, // 前台表格表头用到的数据
depth: maxLevel, // 树形结构表头的最大层级数--导出功能所需
baseCols: baseCols // 底层字段数据集--导出功能所需
};
};得到的baseCols数据
//得到的baseCols数据
[
{
level: 1,
path: "地区",
prop: "AA",
width: "150px"
},
{
level: 1,
path: "资金归集额",
prop: "BB",
width: "100px"
},
{
level: 2,
path: "对下调入_资金",
prop: "CC",
width: "90px"
},
{
level: 2,
path: "对下调入_占比",
prop: "DD",
width: "80px"
},
{
level: 2,
path: "本级调入_资金",
prop: "DD",
width: "100px"
},
{
level: 2,
path: "本级调入_占比",
prop: "DD",
width: "80px"
},
]三、插件引入
1、新建ExcelJS.js文件
2、ExcelJS.js文件中引入需要的库
import ExcelJS from "exceljs"; import FileSaver from "file-saver";
四、导出前数据处理
1、按exceljs格式创建导出函数
conf参数包含的就是上面获取到的baseCols和depth数据，及自定义的其他属性，如文件名等
/**
* @description: excel导出
* @param dataList 需要导出的数据集
* @param conf 导出函数配置数据，包括上面处理得到的底层字段信息baseCols，表头层级数据depth，文件名fileName
* @return
*/
export const downloadExcel = function (dataList = [], conf = {}) {
const workbook = new ExcelJS.Workbook();
// 设置信息
workbook.creator = "Me";
workbook.title = conf.fileName;
workbook.created = new Date();
workbook.modified = new Date();
// 创建工作表
const worksheet = workbook.addWorksheet(conf.fileName)
// 表头信息处理
let columns = columnsPreprocess(conf)
// 表头数据填充及样式设置
headerFillAndSet(columns.headers, columns.widthList, worksheet)
// 横向单元格合并处理
sheetMergesForCross(worksheet, columns.headers);
// 纵向单元格合并处理
sheetMergesForVertical(worksheet, columns.headers);
// 添加数据集
worksheetDataProcess(conf.baseCols, dataList, worksheet)
const _titleCell = titleStyleProcess(worksheet);
// 写入文件
workbook.xlsx.writeBuffer().then((buffer) => {
let _file = new Blob([buffer], {
type: "application/octet-stream",
});
FileSaver.saveAs(_file, "ExcelJS.xlsx");
});
};2、表头及列宽数据预处理
2.1 处理逻辑
// 获取表头及列宽数据集
function columnsPreprocess(conf = {}) {
let underlayCols = conf.baseCols;
let paths = [];
let widthArr = [];
// 将各列的路径信息及列宽分别放到数组中
for (let i = 0; i < underlayCols.length; i++) {
paths.push(underlayCols[i].path);
// 列宽放入数组前，使用excelColumnWidthProcess函数提前处理
widthArr.push(excelColumnWidthProcess(underlayCols[i].width));
}
return {
// excel使用到的表头数据没有可以直接用到的，需要用到headersProcess进行转换
headers: paths.length > 0 ? headersProcess(paths, conf.depth) : [],
widthList: widthArr,
};
}
// 表头数据处理
// 从最上面的界面表格的表头树形结构数据可以看到，有6个底层列，数据结构有2层，转为excel数据格式的 // 话，就需要转为2行6列。即表头层级有多少，这里就转为多少行，表头底层字段有多少，这里就有多少列。
function headersProcess(pathList = [], depth = 1) {
let headers = [];
for (let i = 0; i < depth; i++) {
headers.push([]);
}
let paths = [];
for (let i = 0; i < pathList.length; i++) {
let arr = pathList[i].split("_");
for (let j = arr.length; j < depth; j++) {
arr.push("");
}
paths.push(arr);
}
for (let i = 0; i < depth; i++) {
for (let j = 0; j < paths.length; j++) {
headers[i].push(paths[j][i]);
}
}
return headers;
}
// 列宽处理
// 宽度数据需要转为数字，同时前端的宽度与excel中的列宽存在较大的区别，所以此处除以了5
function excelColumnWidthProcess(width) {
let result = 40;
if (emptyCheck(width)) {
if (getDataType(width) === "string") {
if (width.includes("px")) {
width = width.replace("px", "");
width = parseFloat(width);
result = parseInt(width / 5);
}
} else if (getDataType(width) === "number") {
result = parseInt(width / 5);
}
}
return result;
};2.2 处理结果
// 得到的headers处理结果 [ ['地区', '资金归集额', '省对下调入', '省对下调入', '本级调入', '本级调入'], ['', '', '资金', '占比', '资金', '占比'] ]
3、单元格样式处理函数
// 单元格样式处理，按需设置
const titleStyleProcess = function (sheet, index) {
const titleCell = sheet.getRow(index);
titleCell.eachCell({ includeEmpty: true }, (cell, colNumber) => {
titleCell.getCell(colNumber).fill = {
type: "pattern",
pattern: "solid",
fgColor: { argb: "FFF5F7FA" },
};
titleCell.getCell(colNumber).border = {
top: { style: "thin" },
left: { style: "thin" },
bottom: { style: "thin" },
right: { style: "thin" },
};
});
titleCell.height = 30;
titleCell.font = {
name: "黑体",
bold: true,
size: 14,
color: {
argb: "FF999999",
},
};
// // 设置第一行的对齐方式（水平垂直）
titleCell.alignment = {
vertical: "middle",
horizontal: "center",
};
return titleCell;
};4、表头数据填充及样式设置
// 设置表头的方法还有 worksheet.columns = headers等方式，但似乎只适用于只有一层的表头，也可能是 // 自己没有找对方法。在排除直接设置的方式后，直接将表头数据当做普通行数据进行处理。同时进行行样式设 // 置，此时也就可以理解为表头样式设置。
function headerFillAndSet(headers = [], widthList = [], worksheet) {
for (let i = 1; i <= headers.length; i++) {
worksheet.getRow(i).values = headers[i - 1];
titleStyleProcess(worksheet, i);
}
for (let i = 1; i <= widthList.length; i++) {
worksheet.getColumn(i).width = widthList[i - 1];
}
}5、横向单元格合并处理
// Excel的列名集合，用于合并单元格时定位单元格位置
const colNames = [
"A",
"B",
...,
"Y",
"Z",
"AA",
"AB",
...,
"AY",
"AZ",
....
];
//
function sheetMergesForCross(worksheet, headers) {
for (let i = 0; i < headers.length; i++) {
let arr = [null, null];
for (let j = 1; j <= headers[i].length; j++) {
if (headers[i][j - 1] === headers[i][j]) { // 前后元素相同，表示可以合并
if (!emptyCheck(arr[0]) && emptyCheck(headers[i][j - 1])) {
arr[0] = colNames[j - 1] + (i + 1);
}
arr[1] = colNames[j] + (i + 1);
} else { // 前后元素不相同，j是从1开始，所以表示没有相同列或者此次相同列已结束
if (emptyCheck(arr[0]) && emptyCheck(arr[1])) { // arr[0]或者arr[1]为空，表示相邻元素不同，均有值表示有相同列，arr[1]便是最后一个相同的列
worksheet.mergeCells(arr[0] + ":" + arr[1]);
}
arr = [null, null]; // 相邻元素不同，arr重置，准备下一批可合并元素
}
}
}
}6、纵向单元格合并处理
function sheetMergesForVertical(worksheet, headers) {
let col = headers[0];
// 第一层循环具体元素
for (let i = 0; i < col.length; i++) {
let sd = ""; // 开始元素
let ed = ""; // 结束元素
// 第二层循环，比较层级不同下标相同的元素
for (let j = 1; j < headers.length; j++) {
if (headers[j][i] === "") { // 元素为空，表示可与上层元素合并
sd = emptyCheck(sd) ? sd : colNames[i] + j;
ed = colNames[i] + (j + 1);
}
}
if (emptyCheck(sd) && emptyCheck(ed)) {
worksheet.mergeCells(sd + ":" + ed);
}
}
}7、添加数据集
function worksheetDataProcess(columns = [], dataList = [], worksheet = null) {
let len = 1;
for (let i = 0; i < columns.length; i++) {
len = len < columns[i].level ? columns[i].level : len;
}
for (let i = 0; i < dataList.length; i++) {
let list = [];
for (let j = 0; j < columns.length; j++) {
list.push(dataList[i][columns[j].prop]);
}
worksheet.getRow(len + i + 1).values = list;
}
}五、调用导出函数
// conf = {
// baseCols: baseCols, 表头信息数组
// depth: 2, // 表头最大层级数
// fileName: 'xxxx', 导出文件名、sheet名等，自定
// .... 其他自定义属性
// }
// dataList 需要导出的数据集
downloadExcel(dataList, conf)总结
到此这篇关于vue2项目使用exceljs多表头导出功能的文章就介绍到这了,更多相关vue2 exceljs多表头导出内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！