纯前端excel导出

文章目录

背景
技术选型
- 1.xlsx（`不满足`）
- 2.xlsx-style（`不推荐，后期问题太多`）
- 3.lay-excel(`推荐`)
一、准备内容数据
二、准备表头数据
三、认识lay-excel的导出方法
四、无样式无合并的简单导出实现
五、设置列宽
六合并表头
七、设置表头样式
- 设置公共样式的变量
- 设置表头样式的所有代码
八、设置内容样式
九、设置行高
十、表尾合并数据
总结

背景

工作中遇到这么一个场景，一个统计页面且不带分页的表格，需要excel导出，excel导出一般是由后端导出，然后前端请求头携带Blob信息进行下载即可，此处由于没有分页，且甲方单位对excel导出的样式有要求，于是尝试使用纯前端excel导出，且elementUI、vxe-table等UI库均不能实现excel的样式的修改，需要自己实现样式修改的功能；先看下阅读本文后能实现的效果图如下：

技术选型

1.xlsx（`不满足`）

较为老牌的excel操作库，且不支持样式修改（不满足）
xlsx官网

2.xlsx-style（`不推荐，后期问题太多`）

虽然能修改样式，但是已经停止维护，npm库查看最后一次更新已经是7年前；
且对vite构建工具不友好，包的引入，打包均会报错，实在不推荐
xlsx-style官网

3.lay-excel(`推荐`)

也就是老牌框架layUI的excel导出模块，基于xlsx实现，且有部分函数进行二次封装，且能修改样式；
lay-excel官方文档

一、准备内容数据

篇幅有限，只展示部分数据，此数据不包含表头数据

const body = [{company: '东莞市XXX股份有限公司',yearNo: '2001',total_online: '338',total_offline: '1571',permanent_online: '218',permanent_offline: '998',long_online: '77',long_offline: '372',short_online: '43',short_offline: '201',thirty_online: '0',thirty_offline: '0',decade_online: '0',decade_offline: '0',five_online: '0',five_offline: '0',},{company: '肇庆市XXX股份有限公司',yearNo: '2002',total_online: '1001',total_offline: '5901',permanent_online: '397',permanent_offline: '2867',long_online: '390',long_offline: '2196',short_online: '214',short_offline: '838',thirty_online: '0',thirty_offline: '0',decade_online: '0',decade_offline: '0',five_online: '0',five_offline: '0',},{company: '韶关市XXX股份有限公司',yearNo: '2003',total_online: '2665',total_offline: '12009',permanent_online: '491',permanent_offline: '3086',long_online: '1327',long_offline: '6024',short_online: '847',short_offline: '2899',thirty_online: '0',thirty_offline: '0',decade_online: '0',decade_offline: '0',five_online: '0',five_offline: '0',}]

二、准备表头数据

值得注意的是，数据的字段必须与内容的字段一致，遇到有需要合并的表头，可以设置成空字符串’‘，如下文的total_offline:’'，total_offline和total_online这2列的表头是需要合并到同一列的，也就是合计是占两列的；

header: [{company: '机构',yearNo: '年度',total_online: '合计',total_offline: '',permanent_online: '永久',permanent_offline: '',long_online: '长期',long_offline: '',short_online: '短期',short_offline: '',thirty_online: '30年',thirty_offline: '',decade_online: '10年',decade_offline: '',five_online: '5年',five_offline: '',},{company: '',yearNo: '',total_online: '线上销售',total_offline: '线下销售',permanent_online: '线上销售',permanent_offline: '线下销售',long_online: '线上销售',long_offline: '线下销售',short_online: '线上销售',short_offline: '线下销售',thirty_online: '线上销售',thirty_offline: '线下销售',decade_online: '线上销售',decade_offline: '线下销售',five_online: '线上销售',five_offline: '线下销售',},],

三、认识lay-excel的导出方法

也就是exportExcel方法，参数如下；

官网的简单示例

excel.exportExcel({sheet1: data,sheet2: data
}, '测试导出复杂表头.xlsx', 'xlsx', {extend: {// extend 中可以指定某个 sheet 的属性，如果不指定 sheet 则所有 sheet 套用同一套属性sheet1: {// 以下配置仅 sheet1 有效'!merges': mergeConf,'!cols': colConf,'!rows': rowConf}}
});

详细内容请查看官网

四、无样式无合并的简单导出实现

将表头数据和内容数据合并成一个数组后调用导出方法，效果如下

const clickNoStyleAndNotMagerEvt = () => {LAY_EXCEL.exportExcel([...header, ...body], '无样式无合并导出.xlsx', 'xlsx');};

五、设置列宽

makeColConfig是lay-excel基于excel二次封装后的方法，用于设置列宽；

值得注意的是，这个makeColConfig辅助函数用于一个与xlsx列配置项一致的数据格式,
此处如果只设置一个A:140的话只会A列生效;
如果再配置一个P:80的话,表示为A列宽140，P列宽80，剩下的A-P的范围默认使用第二个参数的80列宽；

  const clickColsEvt = () => {let colConf = LAY_EXCEL.makeColConfig({A: 140,P: 80,},80,);const option = {extend: {'!cols': colConf,},};LAY_EXCEL.exportExcel([...header, ...body], '设置列宽导出.xlsx', 'xlsx', option);};

六合并表头

makeMergeConfig是lay-excel封装的一个辅助函数，需要传入一个二维数组；

如果A1,A2,A3三列合并的话，切记只需填写[‘A1’,‘A3’],无需填写三个元素，否则不生效；

  const clickMegerEvt = () => {const mergeArray = [['A1', 'A2'],//如果A1,A2,A3三列合并的话，切记只需填写['A1','A3'],无需填写三个元素，否则不生效['B1', 'B2'],['C1', 'D1'],['E1', 'F1'],['G1', 'H1'],['I1', 'J1'],['K1', 'L1'],['M1', 'N1'],['O1', 'P1'],];let colConf = LAY_EXCEL.makeColConfig({A: 140,P: 80,},80,);let mergeConf = LAY_EXCEL.makeMergeConfig(mergeArray);const option = {extend: {'!cols': colConf,'!merges': mergeConf,},};LAY_EXCEL.exportExcel([...header, ...body], '设置列宽导出.xlsx', 'xlsx', option);};

七、设置表头样式

使用的是setExportCellStyle方法，详细请查阅官网；

一开始就将表头和内容分别使用两个变量存储，为的就是此处，因为setExportCellStyle只能设置某个区间范围的值，所以此处会调用两次setExportCellStyle方法，一次针对表头，一次针对内容进行样式设置；

效果图如下：

设置公共样式的变量

因为需要设置2次样式，先定义处公共的样式出来

    //边框颜色变量const EXPORT_BORDER_COLOR = '2c3e50';//头部背景色变量const EXPORT_BACKGROUND_COLOR = '3462fd';// 头部字体颜色const EXPORT_HEADER_FONT_COLOR = 'ffffff';//公共样式变量const EXPORT_PUBLIC_STYLE = {s: {alignment: {//设置对齐方式horizontal: 'center',vertical: 'center',},border: {//设置边框top: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },bottom: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },left: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },right: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },},},};

设置表头样式的所有代码

  const clickHeaderStyleEvt = () => {//边框颜色变量const EXPORT_BORDER_COLOR = '2c3e50';//头部背景色变量const EXPORT_BACKGROUND_COLOR = '3462fd';// 头部字体颜色const EXPORT_HEADER_FONT_COLOR = 'ffffff';//公共样式变量const EXPORT_PUBLIC_STYLE = {s: {alignment: {//设置对齐方式horizontal: 'center',vertical: 'center',},border: {//设置边框top: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },bottom: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },left: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },right: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },},},};const mergeArray = [['A1', 'A2'], //如果A1,A2,A3三列合并的话，切记只需填写['A1','A3'],无需填写三个元素，否则不生效['B1', 'B2'],['C1', 'D1'],['E1', 'F1'],['G1', 'H1'],['I1', 'J1'],['K1', 'L1'],['M1', 'N1'],['O1', 'P1'],];//设置表头样式LAY_EXCEL.setExportCellStyle(header, undefined, {s: {fill: { bgColor: { indexed: 64 }, fgColor: { rgb: EXPORT_BACKGROUND_COLOR } },font: {color: { rgb: EXPORT_HEADER_FONT_COLOR },bold: true,},...EXPORT_PUBLIC_STYLE.s,},});//设置列宽let colConf = LAY_EXCEL.makeColConfig({A: 140,P: 80,},80,);//设置合并数据let mergeConf = LAY_EXCEL.makeMergeConfig(mergeArray);const option = {extend: {'!cols': colConf,'!merges': mergeConf,},};LAY_EXCEL.exportExcel([...header, ...body], '设置列宽导出.xlsx', 'xlsx', option);};

八、设置内容样式

如下图所示，内容区域也采用了居中对齐的方式了

  const clickBodyStyleEvt = () => {//边框颜色变量const EXPORT_BORDER_COLOR = '2c3e50';//头部背景色变量const EXPORT_BACKGROUND_COLOR = '3462fd';// 头部字体颜色const EXPORT_HEADER_FONT_COLOR = 'ffffff';//公共样式变量const EXPORT_PUBLIC_STYLE = {s: {alignment: {//设置对齐方式horizontal: 'center',vertical: 'center',},border: {//设置边框top: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },bottom: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },left: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },right: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },},},};const mergeArray = [['A1', 'A2'], //如果A1,A2,A3三列合并的话，切记只需填写['A1','A3'],无需填写三个元素，否则不生效['B1', 'B2'],['C1', 'D1'],['E1', 'F1'],['G1', 'H1'],['I1', 'J1'],['K1', 'L1'],['M1', 'N1'],['O1', 'P1'],];//设置表头样式LAY_EXCEL.setExportCellStyle(header, undefined, {s: {fill: { bgColor: { indexed: 64 }, fgColor: { rgb: EXPORT_BACKGROUND_COLOR } },font: {color: { rgb: EXPORT_HEADER_FONT_COLOR },bold: true,},...EXPORT_PUBLIC_STYLE.s,},});//设置内容样式LAY_EXCEL.setExportCellStyle(body, undefined, EXPORT_PUBLIC_STYLE);//设置列宽let colConf = LAY_EXCEL.makeColConfig({A: 140,P: 80,},80,);//设置合并数据let mergeConf = LAY_EXCEL.makeMergeConfig(mergeArray);const option = {extend: {'!cols': colConf,'!merges': mergeConf,},};LAY_EXCEL.exportExcel([...header, ...body], '设置列宽导出.xlsx', 'xlsx', option);};

九、设置行高

使用的是makeRowConfig辅助函数；详细情查阅官网；

  const clickRowStyleEvt = () => {//边框颜色变量const EXPORT_BORDER_COLOR = '2c3e50';//头部背景色变量const EXPORT_BACKGROUND_COLOR = '3462fd';// 头部字体颜色const EXPORT_HEADER_FONT_COLOR = 'ffffff';//公共样式变量const EXPORT_PUBLIC_STYLE = {s: {alignment: {//设置对齐方式horizontal: 'center',vertical: 'center',},border: {//设置边框top: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },bottom: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },left: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },right: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },},},};const mergeArray = [['A1', 'A2'], //如果A1,A2,A3三列合并的话，切记只需填写['A1','A3'],无需填写三个元素，否则不生效['B1', 'B2'],['C1', 'D1'],['E1', 'F1'],['G1', 'H1'],['I1', 'J1'],['K1', 'L1'],['M1', 'N1'],['O1', 'P1'],];//设置表头样式LAY_EXCEL.setExportCellStyle(header, undefined, {s: {fill: { bgColor: { indexed: 64 }, fgColor: { rgb: EXPORT_BACKGROUND_COLOR } },font: {color: { rgb: EXPORT_HEADER_FONT_COLOR },bold: true,},...EXPORT_PUBLIC_STYLE.s,},});//设置列宽let colConf = LAY_EXCEL.makeColConfig({A: 140,P: 80,},80,);//设置行高let rowConf = LAY_EXCEL.makeRowConfig({1: 30,2: 30,},20,);//设置内容样式LAY_EXCEL.setExportCellStyle(body, undefined, EXPORT_PUBLIC_STYLE);//设置合并数据let mergeConf = LAY_EXCEL.makeMergeConfig(mergeArray);const option = {extend: {'!cols': colConf,'!merges': mergeConf,'!rows': rowConf,},};LAY_EXCEL.exportExcel([...header, ...body], '销售数据导出.xlsx', 'xlsx', option);};

十、表尾合并数据

首先定义一个配置表尾合并的变量

    ///表尾合并的变量const footerConfig = {exclude: ['company', 'yearNo'], //这几个列不用合计merge: [['A', 'B']], //表尾需要合并的二维数组text: '合计', //不用合计的列显示的文案};

再定义一个合并的方法

 /***  表尾处理函数* @param {*} data 内容* @param {*} header 表头* @param {*} option 表尾合并项* @param {*} mergeArr 合并的二维数组*/const handleSum = (data, header, option, mergeArr) => {const _needSumArr = Object.assign([], data);if (!option) {return;}if (!_needSumArr || _needSumArr.length == 0) return;const _tmp = {};// Object.keys遍历获取到所有字段Object.keys(_needSumArr[0]).forEach((key) => {// 使用map处理成一维数字_tmp[key] = 0;_needSumArr.forEach((item) => {if (!option.exclude.includes(key)) {if (!isNaN(item[key])) {_tmp[key] += Number(item[key]);} else {_tmp[key] = NaN;}} else {_tmp[key] = option.text;}});});//处理是需要合并的列if (option.merge.length > 0) {const lenth = header.length + data.length; //表头+内容的长度const merge = option.merge.map((item) => {return item.map((col) => {return col + (lenth + 1);});});merge && merge.length > 0 && mergeArr.push(...merge);}data.push(_tmp);};

最终所有章节的代码

  const clickFooterEvt = () => {//边框颜色变量const EXPORT_BORDER_COLOR = '2c3e50';//头部背景色变量const EXPORT_BACKGROUND_COLOR = '3462fd';// 头部字体颜色const EXPORT_HEADER_FONT_COLOR = 'ffffff';//公共样式变量const EXPORT_PUBLIC_STYLE = {s: {alignment: {//设置对齐方式horizontal: 'center',vertical: 'center',},border: {//设置边框top: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },bottom: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },left: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },right: { style: 'thin', color: { rgb: EXPORT_BORDER_COLOR } },},},};const mergeArray = [['A1', 'A2'], //如果A1,A2,A3三列合并的话，切记只需填写['A1','A3'],无需填写三个元素，否则不生效['B1', 'B2'],['C1', 'D1'],['E1', 'F1'],['G1', 'H1'],['I1', 'J1'],['K1', 'L1'],['M1', 'N1'],['O1', 'P1'],];//设置表头样式LAY_EXCEL.setExportCellStyle(header, undefined, {s: {fill: { bgColor: { indexed: 64 }, fgColor: { rgb: EXPORT_BACKGROUND_COLOR } },font: {color: { rgb: EXPORT_HEADER_FONT_COLOR },bold: true,},...EXPORT_PUBLIC_STYLE.s,},});//设置列宽let colConf = LAY_EXCEL.makeColConfig({A: 140,P: 80,},80,);//设置行高let rowConf = LAY_EXCEL.makeRowConfig({1: 30,2: 30,},20,);///表尾合并的变量const footerConfig = {exclude: ['company', 'yearNo'], //这几个列不用合计merge: [['A', 'B']], //表尾需要合并的二维数组text: '合计', //不用合计的列显示的文案};handleSum(body, header, footerConfig, mergeArray);//设置内容样式LAY_EXCEL.setExportCellStyle(body, undefined, EXPORT_PUBLIC_STYLE);//设置合并数据let mergeConf = LAY_EXCEL.makeMergeConfig(mergeArray);const option = {extend: {'!cols': colConf,'!merges': mergeConf,'!rows': rowConf,},};LAY_EXCEL.exportExcel([...header, ...body], '销售数据导出.xlsx', 'xlsx', option);};

总结

以上章节都是分功能实现，只为论述每个章节内容，实际的运用还请二次封装成一个公共方法调用，否则代码冗余；

示例代码