vue页面纯前端导出excel表格（多级表头，exceljs）
2023-01-05 本文已影响0人
坐在天台吹吹风
最近遇到一个比较麻烦的需求，前端实现excel导出，并且导出表格的表头不确定，由用户进行设置。也就是说表头可能是一行也可能是两行，并且有的标题需要合并。导出效果如下图所示：
导出表格部分内容.png
查找对比
因为是第一次实现这样的功能，先在网上进行了查找，发现了三种比较常用的方法：
1.安装file-saver xlsx script-loader
如果想设置表格样式的话，需要同时安装依赖xlsx-style，通常情况下安装此依赖会报错，需要进行修改；
2.安装vue-json-excel
这个插件看起来比较好上手，但是好像只适用于导出简单表头，不支持多级，如果导出表格简单的话大家可以尝试一下。不过因为不符合我的需求，所以我直接跳过了，不知道是否可以设置样式；
3.安装exceljs
只用安装一个依赖并且支持修改样式，我选择了这个方法。
功能实现
1. 安装依赖
npm install exceljs
2.设置表格数据格式
表格数据包含了表头标题和表里内容，需要处理成固定格式。
请求后端拿到的表格数据格式：
[{
rate: 0.65,
name: "变更版本八",
avgs: 10,
priceIndexList: [
{indexYear: "2023", indexMonth: "01", indexValue: "1"}
{indexYear: "2023", indexMonth: "02", indexValue: "2"}
],
status: 0,
staffIndex: { indexYear: "2023", indexValue: "1" }
}]
需要拿到的表头数据格式：
[{
name: "name",
label: "名称"
},{
name: "",
label: "价格指数",
children: [{
name: "",
label: "2023年",
children: [{
name: "price1",
label: "1月"
},{
name: "price2",
label: "2月"
}]
}]
}]
其中name为绑定的字段，类似于table表格中的prop；label为name对应的字段名称，类似于table表格中的label。
需要注意的是，导出表格和页面展示不一样，页面展示的时候prop值我们可以使用a.b或者a[0].b展示，但是导出的时候name值不可以，必须使用单个字段。
需要拿到的表中数据格式：
可以直接为请求后端拿到的表格数据，如果有需要处理的数据进行处理即可。我请求到的数据中有三类数据需要进行处理。
第一种是返回为字典key，需要转换成字典value值；
第二种是返回数据格式为list，需要转换成单个的数据；
第三种是对象数据，取出其中的值
let list = data.map(item=>{
// 一个一个判断然后处理就可以，不要嫌麻烦
// 字典转换
for (let key in item) {
if (key == "status" {
item[key] = this.selectDictLabel(this.yesOrNo, item[key]);
}
}
// list拆解
for (let i=0; i < 12; i++) {
item["price"+i] = item.priceIndexList[i].indexValue;
}
// 对象取值
item.staff = item.staffIndex ? item.staffIndex.indexValue : "";
})
不要嫌麻烦，前端实现导出本来就是一件麻烦的事情。
3.导出方法调用
this.exportMultiHeaderExcel(title, list); // title为设置好的表头数据，list为表中数据
导出方法中判断表头有几行，合并单元格
由于导出方法过长，所以对代码块进行了分割，其实都在这个方法中
exportMultiHeaderExcel(column,data) {
let keyArr = this.columns.map((item)=>{
return item.label;
}) // 一级表头数组
let singleLen = keyArr.length; // 简单标题长度
let multiLen = 0; // 用来判断是否有三级表头
let doubLen = 0; // 用来判断是否有二级表头
let row1 = JSON.parse(JSON.stringify(keyArr));
let idx1 = row1.findIndex((item) => item == "价格指数");
if (idx1 > -1) {
row1.splice(idx1+1, 0, "", "", "", "", "", "", "", "", "", "", "");
singleLen--;
multiLen++;
}
let idx6 = row1.findIndex((item) => item == "期末人数");
if (idx6 > -1) {
singleLen--;
doubLen = 1;
}
let row2 = [];
let row3 = [];
},
- 导出方法中不同标题处理
每一行必须保持相同的长度，为了之后合并单元格，没有数据的设置为空
// 判断不同标题进行不同处理
if (multiLen && doubLen) { // 所有标题都有
for (let i = 0; i < singleLen; i++) {
row2.push("");
row3.push("");
};
if (idx1 > -1) {
row2.splice(idx1+1, 0, this.indexYear+"年", "", "", "", "", "", "", "", "", "", "", "");
row3.splice(idx1+1, 0, "1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
}
if (idx6 > -1) {
row2.push(this.indexYear+"年");
row3.push("");
}
} else {...}
- 导出方法中创建工作表
// 创建excel
const workbook = new ExcelJS.Workbook();
// 创建工作表
const sheet = workbook.addWorksheet("sheet1");
// 添加表头
sheet.getRow(1).values = row1;
if (row2 && row2.length) {
sheet.getRow(2).values = row2;
}
if (row3 && row3.length) {
sheet.getRow(3).values = row3;
}
- 导出方法中导出表头设置
因为我这只有三级标题所以进行了三次循环，循环次数和标题行数有关系，这里应该可以简化，还没想到具体方法
// 导出表头设置
const headers = [];
column.forEach((item,index)=>{ //显示标题循环
if(item.children){ //有子级
item.children.forEach(itemChild=>{ //子级循环
if(itemChild.children){ //有子级
itemChild.children.forEach(itemChild1=>{ //子级循环
const obj = {
key:itemChild1.name, width: null
} //子级数据
const maxArr = [this.autoWidthAction(itemChild1.label)]
data.forEach(ite=>{ //显示信息循环
const str = ite[itemChild1.name] ||'' //信息内容
if(str){
maxArr.push(this.autoWidthAction(str))
}
})
obj.width = Math.max(...maxArr)+5
// 设置列名、键和宽度
headers.push(obj);
})
}else {
const obj = {
key:itemChild.name, width: null
} //子级数据
const maxArr = [this.autoWidthAction(itemChild.label)]
data.forEach(ite=>{ //显示信息循环
const str = ite[itemChild.name] ||'' //信息内容
if(str){
maxArr.push(this.autoWidthAction(str))
}
})
obj.width = Math.max(...maxArr)+5
// 设置列名、键和宽度
headers.push(obj);
}
})
}else {
const obj = {
key:item.name, width: null
} //标题
const maxArr = [this.autoWidthAction(item.label)]
data.forEach(ite=>{
const str = ite[item.name] ||''
if(str){
maxArr.push(this.autoWidthAction(str))
} //内容
})
obj.width = Math.max(...maxArr)+5
// 设置列名、键和宽度
headers.push(obj);
}
})
sheet.columns = headers;
sheet.addRows(data);
- 导出方法中合并单元格
由于excel列的排序，this.exTabHeader是我写的一个排序数组["A","B","C","D","E","F","G","H","I","J","K","L","M"...]，方便数字与字母的对应
// 合并单元格
// sheet.mergeCells(`D1:F1`); // 表示合并D列1行到F列1行
if (doubLen && multiLen) {
for (let i = 0; i < singleLen; i++) {
let start1 = this.exTabHeader[i]+1;
let end1 = this.exTabHeader[i]+3;
sheet.mergeCells(`${start1}`+":"+`${end1}`);
}
let start2 = this.exTabHeader[idx6]+2;
let end2 = this.exTabHeader[idx6]+3;
sheet.mergeCells(`${start2}`+":"+`${end2}`);
if (idx1 > -1) {
let start1 = this.exTabHeader[idx1]+1;
let end1 = this.exTabHeader[idx1+11]+1;
sheet.mergeCells(`${start1}`+":"+`${end1}`);
let start2 = this.exTabHeader[idx1]+2;
let end2 = this.exTabHeader[idx1+11]+2;
sheet.mergeCells(`${start2}`+":"+`${end2}`);
}
} else { ... }
- 导出方法中设置表格标题样式
// 表格样式
for (let i = 0; i < row1.length; i++) {
let one = this.exTabHeader[i]+1;
sheet.getCell(`${one}`).font = { // 字体
color: { argb:'FFFFFFFF' },
bold: true
}
sheet.getCell(`${one}`).fill = { // 背景色
type: 'pattern',
pattern:'solid',
fgColor:{ argb:'FF808080' }
}
}
- 导出方法中写入文件
// 写入文件
workbook.xlsx.writeBuffer().then((data) => {
const blob = new Blob([data, { type: "application/vnd.ms-excel" }]);
if (window.navigator.msSaveOrOpenBlob) {
// msSaveOrOpenBlob方法返回boolean值
navigator.msSaveBlob(blob, filename + ".xlsx");
// 本地保存
} else {
const link = document.createElement("a"); // a标签下载
link.href = window.URL.createObjectURL(blob); // href属性指定下载链接
link.download = "导出.xlsx"; // dowload属性指定文件名
link.click(); // click()事件触发下载
window.URL.revokeObjectURL(link.href); // 释放内存
}
});
autoWidthAction方法
autoWidthAction(val,width) {
if (val == null) {
width = 10;
} else if (val.toString().charCodeAt(0) > 255) {
/*if chinese*/
width = val.toString().length * 2;
} else {
width = val.toString().length;
}
return width
}
如果想设置其他的属性，也可以查阅exceljs文档进行设置。
- 参考链接
前端导出Excel（自定义样式、多级表头、普通导出）
vue-admin-perfect
exceljs中文文档|exceljs js中文教程|解析
ExcelJS 使用帮助文档 - 心得体会
1.写这个功能之前其实先在网上查了两天，因为以前都是后端做导出。但是和我们经理商量，他很坚持的表示了由前端来做，没办法才开始做。所以，如果没做过还不得不做还是早开始比较好。
2.因为比较着急，所以代码写得比较冗余比较乱，其实有很多地方可以改进，看之后时间吧，如果有时间会进行优化，不过一般都是不了了之。
3.这个表格需求因为标题位置是固定的，也就是说一定是一行标题，三行标题，两行标题排列。并且，三行标题就是包含了12个子标题，两行标题就是包含了一个子标题，所以有些地方直接写的固定数值。如果是不确定的长度，可能需要循环来判断。如果只有一行简单标题的话应该会很棒，大家可以根据需求自行判断使用什么方法。
4.希望导出多由后端实现。
