简单的操作生成漂亮的EXCEL,快速上手。提供漂亮模板直接使用
若存在疑问和支持,请邮件2362259057#qq.com('#'替换为'@') 或则 isSues
,
组件依附 exceljs 和 file-saver 进行封装,需要install相关依赖;
特此感谢
npm install easyexceljs -S
npm install exceljs -S
npm install file-saver -S
快速开始(生成一个Excel 以vue项目里使用为例)⬆
import {createExcelByOneSheet,ExcelStyleTemplate,getCellPosLetter} from "easyexceljs"
//用例数据 github上已提供 uri:https://github.com/liyuec/easyExcelJs/tree/main/expmale/testData
import headArray from "./expmaleDate/headarray";
import bodyarray from "./expmaleDate/bodyarray";
methods:{
createExcelExpmale(){
//new的时候需要传入基本的options,不传会默认变为'sheet1' 和 'excel'
const excelOptions = {
excelFileName: "XX公司年度报表",
sheetName:'本季度报表1'
};
//创建一个实例
const _createExcelByOneSheet = new createExcelByOneSheet(excelOptions);
//定义excel head部分的格式
const _head = [];
//选择整个excel的样式 目前一共3个
const red = ExcelStyleTemplate.red;
/*需要对应到列
其中header,key,width必传,
key 对应 bodyArray的key ,body中每行需对应的key
header为第1行head显示的可见内容,比如 keyFiled1 对应的 title:“字段名称”,
width为每列宽度
*/
headArray.forEach((i) => {
_head.push({
header: i.title,
key: i.field,
width: 25
});
});
//赋值excel head数据(第1行)
_createExcelByOneSheet.sheetColumnsData = [..._head];
//赋值excel body数据, 按照head[] 数据结构进行匹配
_createExcelByOneSheet.sheetRowsData = [...bodyarray];
//传入样式
_createExcelByOneSheet.rowStyleOptions.push(red.rowStyle);
//下载得到excel
_createExcelByOneSheet.saveAsExcel();
}
}
可见基本模板(1.0.0提供的3个可立即使用的模板)⬆
//引入提供模板Style
import {ExcelStyleTemplate} from "easyexceljs"
//一共三个模板
const red = ExcelStyleTemplate.red;
const blue = ExcelStyleTemplate.blue;
const green = ExcelStyleTemplate.green;
默认提供如下样式的模板对象,可根据需求自行修改颜色, 建议不要更改属性,方便兼容
import {ExcelStyleTemplate,getExcelCellStyle} from "easyexceljs"
//默认结构,未考虑版本兼容,可以理解为baseDTO
CellStyleDTO(){
let obj = new Object(
{
cellIndex:1,
rowIndex:1,
cellName:'',
BorderColor:'',
BorderStyle:'',
font:{
name:'',
size:'',
bold:'',
color:''
}
}
)
return obj;
}
//获取基本的cell样式,可自行根据需求更改颜色,字体大小,字体等
getExcelCellStyle = function(colorTemplate){
var cellStyle = new CellStyleDTO();
switch(colorTemplate){
case "red":
cellStyle.BorderColor = 'ffff0000'
cellStyle.BorderStyle = 'thin'
cellStyle.font = {
name:'Malgun Gothic Semilight',
size:11,
bold:true,
color:'ffff0000'
}
break;
case "blue":
cellStyle.BorderColor = 'ff5faee3'
cellStyle.BorderStyle = 'thin'
cellStyle.font = {
name:'Malgun Gothic Semilight',
size:11,
bold:true,
color:'ff5faee3'
}
break;
case "green":
cellStyle.BorderColor = 'ff48c9b0'
cellStyle.BorderStyle = 'thin'
cellStyle.font = {
name:'Malgun Gothic Semilight',
size:11,
bold:true,
color:'ff48c9b0'
}
break;
default:
cellStyle.BorderColor = ''
cellStyle.BorderStyle = ''
cellStyle.font = {
name:'宋体',
size:11,
bold:false,
color:'ff000000'
}
break;
}
return cellStyle;
}
//默认模板样式
ExcelStyleTemplate = {
'red': {
rowStyle:{
rowNum:1,
rowBgColor: 'FFFF0000',
font:{
name:'Arial',
size:12,
bold:true,
color:'ffffffff'
}
},
cellStyle:{
cellName:'',
BorderColor: 'FFFF0000',
BorderStyle:'thin',
font:{
name:'Arial',
size:11,
bold:true,
color:'ff707b7c'
}
}
},
'blue':{
rowStyle:{
rowNum:1,
rowBgColor: 'ff5faee3',
font:{
name:'Arial',
size:12,
bold:true,
color:'ffffffff'
}
},
cellStyle:{
cellName:'',
BorderColor: 'ff48c9b0',
BorderStyle:'thin',
font:{
name:'Arial',
size:11,
bold:true,
color:'ff707b7c'
}
}
},
'green':{
rowStyle:{
rowNum:1,
rowBgColor: 'ff48c9b0',
font:{
name:'Arial',
size:12,
bold:true,
color:'ffffffff'
}
},
cellStyle:{
cellName:'',
BorderColor: 'ffff0000',
BorderStyle:'thin',
font:{
name:'Arial',
size:11,
bold:true,
color:'ff707b7c'
}
}
}
}
easyExceljs 使用DEMO地址
import {getCellPosLetter} from "easyexceljs"
/*
比如传入 getCellPosLetter(1,1) 得到 A1
传入 getCellPosLetter(27,1) 得到 AA1
*/
getCellPosLetter(cellIndex,rowIndex)
/*
where条件必传,结构见下段代码
cellStyle 可不指定,不指定将默认使用 默认样式
可以链式调用
*/
setCellStyleByWhere(where,cellStyle)
/*
必传
若实体结构不正确,或则不包含对应的值,将忽略本次where条件
*/
where:{
valueKey: '传入头部的key的值'
whereType: < | > | == | != | === | !== | indexOf | unIndexOf
whereValue: number | string
}
属性名 |
描述 |
> |
找到 大于 whereValue |
< |
找到 小于 whereValue |
== |
找到 等于 whereValue的字段,并隐式类型转换 |
=== |
找到 等于 whereValue的字段,并且进行类型判断 |
!== |
找到 不等于 whereValue的字段,并且进行类型判断 |
indexOf |
找到 包含 whereValue的字段,可以理解为左右模糊查询 |
unIndexOf |
找到 不包含 whereValue的字段 |
import {createExcelByOneSheet,getExcelCellStyle} from "easyexceljs"
const excelOptions = {
excelFileName: "XX公司年度报表",
sheetName:'本季度报表1'
};
//创建一个实例
const _createExcelByOneSheet = new createExcelByOneSheet(excelOptions);
/*
设置header , body
此处代码略,参照 “快速开始”
*/
let whereSelectByUserName = {
valueKey:'userName',
whereType:'indexOf',
whereValue:'李三'
},
whereSelectByUserId = {
valueKey:'userId',
whereType:'>',
whereValue:10000
},
whereSelectByNickName = {
valueKey:'NickName',
whereType:'indexOf',
whereValue:'用户名'
},
cellStyle = getExcelCellStyle('red';
_createExcelByOneSheet
.setCellStyleByWhere(whereSelectByUserName,cellStyle)
.setCellStyleByWhere(whereSelectByUserId,cellStyle)
.setCellStyleByWhere(whereSelectByUserId)
setCellStyleByRowCellIndex(rowCellIndex,cellStyle)
rowCellIndex数据结构 = [[rowIndex,cellIndex],[rowIndex,cellIndex]]
import {createExcelByOneSheet,getExcelCellStyle} from "easyexceljs"
const excelOptions = {
excelFileName: "XX公司年度报表",
sheetName:'本季度报表1'
};
//创建一个实例
const _createExcelByOneSheet = new createExcelByOneSheet(excelOptions);
/*
设置header , body
此处代码略,参照 “快速开始”
*/
let cellStyle = getExcelCellStyle('blue');
_createExcelByOneSheet
.setCellStyleByRowCellIndex([[rowIndex,cellIndex],[rowIndex,cellIndex]],cellStyle)
.setCellStyleByRowCellIndex([[rowIndex,cellIndex],[rowIndex,cellIndex]])
setCellNoteTextByRowCellIndex(rowCellIndex,noteTexts)
rowCellIndex : [[rowIndex,cellIndex],[rowIndex,cellIndex]]
noteTexts : [string,string]
import {createExcelByOneSheet,getExcelCellStyle} from "easyexceljs"
const excelOptions = {
excelFileName: "XX公司年度报表",
sheetName:'本季度报表1'
};
//创建一个实例
const _createExcelByOneSheet = new createExcelByOneSheet(excelOptions);
/*
设置header , body
此处代码略,参照 “快速开始”
*/
let cellStyle = getExcelCellStyle('blue');
_createExcelByOneSheet
.setCellNoteTextByRowCellIndex([[rowIndex,cellIndex],[rowIndex,cellIndex]],['注册可以是任何内容,若存在特殊表情,需要依赖系统自身解析',''])
.setCellNoteTextByRowCellIndex([[rowIndex,cellIndex],[rowIndex,cellIndex]],['',''])
通过指定行·列设置,返回原始Cell,用户可根据原始Cell进行callBack⬆
customSetValueByIndex(rowCellIndex,noteTexts,repairLength)
rowCellIndex数据结构 = [[rowIndex,cellIndex],[rowIndex,cellIndex]] 或则 '*'
callBack : function(cell){} 其中cell是得到每列的原始数据,可进行操作
repairLength : int32 冗余行数 需要补充的row length 遍历,若head只有一行,则为1
import {createExcelByOneSheet,getExcelCellStyle} from "easyexceljs"
const excelOptions = {
excelFileName: "XX公司年度报表",
sheetName:'本季度报表1'
};
//创建一个实例
const _createExcelByOneSheet = new createExcelByOneSheet(excelOptions);
/*
设置header , body
此处代码略,参照 “快速开始”
*/
_createExcelByOneSheet
.customSetValueByIndex('*',function(cell){
//可打印cell 查看需要包含的属性
console.log(cell)
let {value} = cell;
if(typeof value == 'string'){
if(value.indexOf('%') > -1){
let _temp = value.replace('%','');
if(!isNaN(parseFloat(_temp,10))){
value = value.replace('%','');
cell.value = value / 100;
cell.numFmt = '0.00%';
}
}else if(!isNaN(parseFloat(value,10))){
cell.value = parseFloat(value,10);
}
}
},2)
.customSetValueByIndex([[1,1],[1,2]],function(cell){
//做和业务相关的事
})
属性名 |
描述 |
cellName |
行列号,比如'B3:B4','B3:C3',若不传参数,则返回this |
//合并单元格
_createExcelByOneSheet.mergeCells('B1:C1')('A1:A2')('D1:D2')('E1:F1')('G1:G2')();
属性名 |
描述 |
cellName |
行列号,比如'B3:B4','B3:C3',若不传参数,则返回this |
alignment |
{ vertical: 'middle', horizontal: 'center' ,wrapText: true} |
alignment |
描述 |
vertical,horizontal |
left:居左 ,right:居右,center:居中。 |
wrapText |
true:自动换行 , false:不换行 |
//控制合并后的格式 各cell 配置
let alignObj = { vertical: 'middle', horizontal: 'center' ,wrapText: true},
alignContent = {vertical: 'middle', horizontal: 'left' ,wrapText: true};
_createExcelByOneSheet.alignmentCells({cellName:'B1:C1',alignment:alignObj})
({cellName:'A1:A2',alignment:alignObj})({cellName:'D1:D2',alignment:alignObj})
({cellName:'E1:F1',alignment:alignObj})({cellName:'G1:G2',alignment:alignObj})
({cellName:'B2',alignment:alignObj})({cellName:'C2',alignment:alignObj})
({cellName:'E2',alignment:alignObj})({cellName:'F2',alignment:alignObj});
//其他相似列列处理
let otherCells = [];
otherCells = [3,4,5,6].map(num=>{
return ['A','B','C','D','E','F','G'].map(letter=>{
let res = letter+num
return res
})
})
otherCells = otherCells.flat();
otherCells.forEach(cellName=>{
_createExcelByOneSheet.alignmentCells({cellName:cellName,alignment:alignContent})
})
属性名 |
描述 |
cellName |
行列号,比如'B3:B4','B3:C3',若不传参数,则返回this |
richText |
[] |
//设置富文本的值
let B3richText = [
{'font': {'size': 12,'color': {'argb': 'ff000000'}},'text': '1. System UX '},
{'font': {'bold': true,'size': 13,'color': {'argb': 'ffb22222'}},'text': 'UX \n'},
{'font': {'size': 12,'color': {'argb': 'ff000000'}},'text': '1. a.ET system access permission(Stable) \n'},
{'font': {'size': 12,'color': {'argb': 'ff000000'}},'text': 'b.ET Network stability \n'},
{'font': {'size': 12,'color': {'argb': 'ff000000'}},'text': '2.Input form(Accepted by ET)'},
{'font': {'bold': true,'size': 13,'color': {'argb': 'ffb22222'}},'text': ' C \n'},
{'font': {'size': 12,'color': {'argb': 'ff000000'}},'text': '3.Material attached(If needed) '},
{'font': {'bold': true,'size': 13,'color': {'argb': 'ffb22222'}},'text': ' C \n'},
],
B4richText = [
{'font': {'size': 12,'color': {'argb': 'ff000000'}},'text': '1.Input form&Material by ET submitted '},
{'font': {'bold': true,'size': 13,'color': {'argb': 'ffb22222'}},'text': 'UX \n'},
{'font': {'bold': true,'size': 12,'color': {'argb': 'ff000000'}},'text': '2.System \n'},
{'font': {'size': 12,'color': {'argb': 'ff000000'}},'text': 'a.TL system access permission(Stable) '},
{'font': {'bold': true,'size': 13,'color': {'argb': 'ffb22222'}},'text': ' CX \n'},
{'font': {'size': 12,'color': {'argb': 'ff000000'}},'text': 'b.TL system Network stability '},
{'font': {'bold': true,'size': 13,'color': {'argb': 'ffb22222'}},'text': ' UX \n'},
{'font': {'size': 12,'color': {'argb': 'ff000000'}},'text': '3.Knowledge: '},
{'font': {'bold': true,'size': 13,'color': {'argb': 'ffb22222'}},'text': ' CX \n'},
{'font': {'size': 12,'color': {'argb': 'ff000000'}},'text': '4.Number available TL & coordinators '},
{'font': {'bold': true,'size': 13,'color': {'argb': 'ffb22222'}} ,outline:false,'text': ' CX-Mace \n'},
]
_createExcelByOneSheet.RichTextCells({cellName:'B3',richText:B3richText})
({cellName:'B4',richText:B4richText})
({cellName:'B5',richText:B4richText})();
属性名 |
描述 |
rowIndex |
行数,从1开始 |
height |
number,若不传入默认15 |
//设置行高
_createExcelByOneSheet.rowsHeight
({rowIndex:2,height:35})
({rowIndex:3,height:100})
({rowIndex:4,height:100})
({rowIndex:5,height:100})
({rowIndex:6,height:100})
({rowIndex:7,height:100})()
属性名 |
描述 |
base64Image |
图片转base64 |
tl |
{col: 3.6, row: 2} |
ext |
{ width: 100, height: 200 } |
//获取配图
var _canvas = document.querySelector("#_canvas"),
_base64Image = _canvas.toDataURL('image/png',1);
_createExcelByOneSheet.ImageInWorkBookBase64({base64Image:_base64Image,tl:{col: 3.6, row: 2.4},ext:{ width: _canvas.width, height: _canvas.height }})
saveAsExcel 其中保存完毕后,所有的设置将会清空
import {createExcelByOneSheet,getExcelCellStyle} from "easyexceljs"
const excelOptions = {
excelFileName: "XX公司年度报表",
sheetName:'本季度报表1'
};
//创建一个实例
const _createExcelByOneSheet = new createExcelByOneSheet(excelOptions);
/*
设置header , body
此处代码略,参照 “快速开始”
*/
_createExcelByOneSheet.saveAsExcel()