xlsx-js-style
安装
导出 excel 较常见的 js 库是之一是 xlsx,
xlsx
算是基础版本,不能对单元格进行样式(对齐方式、文字颜色、背景颜色等)的修饰,如果需要修饰单元格,可使用 xlsx-js-style
npm install xlsx-js-style
引入
importXLSXSfrom'xlsx-js-style';
需要导出的数据源
// 一般我们拿到的是从接口中请求到的对象数组,在使用是需要转成二维数组,下面有介绍const data =[{name:'商品01',mb_num:50,mb_sum:5000,pc_num:30,pc_sum:3000,total_num:80,total_sum:8000},{name:'商品02',mb_num:50,mb_sum:5000,pc_num:30,pc_sum:3000,total_num:80,total_sum:8000},{name:'商品03',mb_num:50,mb_sum:5000,pc_num:30,pc_sum:3000,total_num:80,total_sum:8000},]
将数据源转成需要的二维数组
const body = data.map(x=>([x.name, x.mb_num, x.mb_sum, x.pc_num, x.pc_sum, x.total_num, x.total_sum]))// 转换后的数据为一个二维数组[['商品01',50,5000,30,3000,80,8000]['商品02',50,5000,30,3000,80,8000]['商品03',50,5000,30,3000,80,8000]]
定义 Excel 表头
/*
定义表头,每一行即是一个数组,数组中的元素即是一个个单元格内容。
如果单元格不需要样式,那么每个元素类型为字符串即可。如:['一月(2022年01月)'],
如果单元格需要样式,那么数组中的元素就需要为一个个对象,在此对象中定义单元格的样式等等。
*/const header =[// 第一行,需要样式,则数组中元素为对象,进行定义样式。[{v:'一月(2023年01月)',t:'s',s:{// font 字体属性font:{bold:true,sz:14,name:'宋体',},// alignment 对齐方式alignment:{vertical:'center',// 垂直居中horizontal:'center',// 水平居中},// border 边框属性border:{top:{style:'thin'},bottom:{style:'thin'},left:{style:'thin'},right:{style:'thin'}},// fill 颜色填充属性fill:{fgColor:{rgb:'87CEEB'},},},},],['商品名称','手机客户端','','电脑客户端','','总计',''],['','销售数量','销售金额','销售数量','销售金额','销售数量','销售金额']]
将定义好的表头添加到 body 中
body.unshift(...header);
将二维数组转成 sheet
// 这里我们举例是用 aoa_to_sheet ,所以是需要将数据源转成一个二维数组const sheet =XLSXS.utils.aoa_to_sheet(body);// aoa_to_sheet 是将【一个二维数组】转化成 sheet// json_to_sheet 是将【由对象组成的数组】转化成sheet// table_to_sheet 是将【table的dom】直接转成sheet
!merges 设置单元格合并
如果需要设置单元格合并,则定义好
merges
,添加到
sheet
中。
merges 为一个对象数组,每个对象设定了单元格合并的规则。
{ s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }, 即为一个规则,s:开始位置, e:结束位置, r:行, c:列
const merges =[{s:{r:0,c:0},e:{r:0,c:6}},{s:{r:1,c:1},e:{r:1,c:2}},{s:{r:1,c:3},e:{r:1,c:4}},{s:{r:1,c:5},e:{r:1,c:6}},{s:{r:1,c:0},e:{r:2,c:0}},]
sheet['!merges']= merges;// 添加到sheet中
!cols 设置列宽
cols 为一个对象数组,依次表示每一列的宽度。
const cols =[{wch:10},{wch:10},{wch:10},{wch:10},{wch:10},{wch:10},{wch:10}];
sheet['!cols']= cols;// 添加到sheet中
!rows 设置行高
rows 为一个对象数组,依次表示每一行的高度
const rows =[{hpx:20},{hpx:16},{hpx:18}]
sheet['!rows']= rows;// 添加到sheet中
创建虚拟的 workbook
Excel整个表格可称为
workbook
。里面的每张表分别是
sheet
const workbook = xlsx.utils.book_new();
向 workbook 中添加 sheet
XLSXS.utils.book_append_sheet(workbook, sheet,'sheet名称');// 一个 workbook 允许添加多个 sheet,即可以同时创建多个表// xlsx.utils.book_append_sheet(workbook, sheet2, 'sheet名称2');
导出 workbook
// 注意:定义导出 excel 的名称时需要加上后缀 .xlsx
xlsx.writeFile(workbook,'excel名称.xlsx');
完整示例
import XLSXS from 'xlsx-js-style';
......
// 需要导出的数据源
const data = [
{ name: '商品01', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 },
{ name: '商品02', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 },
{ name: '商品03', mb_num: 50, mb_sum: 5000, pc_num: 30, pc_sum: 3000, total_num: 80, total_sum: 8000 },
]
// 将数据源转成我们需要的二维数组
const body = data.map(x => ([x.name, x.mb_num, x.mb_sum, x.pc_num, x.pc_sum, x.total_num, x.total_sum]))
/* 定义表头
定义表头,每一行即是一个数组,数组中的元素即是一个个单元格内容。
如果单元格不需要样式,那么每个元素类型为字符串即可。如:['一月(2022年01月)'],
如果单元格需要样式,那么数组中的元素就需要为一个个对象,在此对象中定义单元格的样式等等。
这里只针对第一行进行举例:
*/
const header = [
[
{
v: '一月(2023年01月)',
t: 's',
s: {
// font 字体属性
font: {
bold: true,
sz: 14,
name: '宋体',
},
// alignment 对齐方式
alignment: {
vertical: 'center', // 垂直居中
horizontal: 'center', // 水平居中
},
// fill 颜色填充属性
fill: {
fgColor: { rgb: '87CEEB' },
},
},
},
],
['商品名称', '手机客户端', '', '电脑客户端', '', '总计', ''],
['', '销售数量', '销售金额', '销售数量', '销售金额', '销售数量', '销售金额']
]
body.unshift(...header);// 将定义好的表头添加到 body 中
const sheet = xlsx.utils.aoa_to_sheet(body);// aoa_to_sheet 将二维数组转成 sheet
// 设置合并单元格
const merges = [
{ s: { r: 0, c: 0 }, e: { r: 0, c: 6 } },
{ s: { r: 1, c: 1 }, e: { r: 1, c: 2 } },
{ s: { r: 1, c: 3 }, e: { r: 1, c: 4 } },
{ s: { r: 1, c: 5 }, e: { r: 1, c: 6 } },
{ s: { r: 1, c: 0 }, e: { r: 2, c: 0 } },
]
sheet['!merges'] = merges; // 将merges添加到sheet中
// 设置列宽
const cols = [ { wch: 10 },{ wch: 10 },{ wch: 10 },{ wch: 10 },{ wch: 10 },{ wch: 10 },{ wch: 10 } ];
sheet['!cols'] = cols; // 将cols添加到sheet中
//
const rows = [ { hpx: 20 },{ hpx: 16 },{ hpx: 18 }]
sheet['!rows'] = rows; // 将rows添加到sheet中,设置行高
const workbook = XLSXS.utils.book_new();// 创建虚拟的 workbook
XLSXS.utils.book_append_sheet(workbook, sheet, 'sheet名称'); // 向 workbook 中添加 sheet
XLSXS.writeFile(workbook, 'excel名称.xlsx'); // 导出 workbook
// 注意:定义导出 excel 的名称时需要加上后缀 .xlsx
效果图
总结
创建虚拟的 workbook
、将数组转成 sheet
、向workbook中添加sheet
和导出workbook
,这四个步骤是必要的。设置合并单元格
、设置列宽
、设置行高
是可选的,根据需求进行添加。- 如果添加样式需要
border
则需要在被合并的单元格位置进行占位。
版权归原作者 swimxu 所有, 如有侵权,请联系我们删除。