前端js使用xlsx-js-style导出Excel文件并修饰单元格样式
更新时间：2023年08月29日 09:52:12 作者：swimxu
这篇文章主要给大家介绍了关于前端js使用xlsx-js-style导出Excel文件并修饰单元格样式的相关资料,前端开发过程中经常遇到导出excel的需求,需要的朋友可以参考下
安装
导出 excel 较常见的 js 库是之一是 xlsx，xlsx 算是基础版本，不能对单元格进行样式（对齐方式、文字颜色、背景颜色等）的修饰，如果需要修饰单元格，可使用 xlsx-js-style
npm install xlsx-js-style
引入
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])) // 转换后的数据为一个二维数组 [ ['商品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则需要在被合并的单元格位置进行占位。
到此这篇关于前端js使用xlsx-js-style导出Excel文件并修饰单元格样式的文章就介绍到这了,更多相关前端导出Excel并修饰单元格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了 Js与Jq获取浏览器和对象值的方法的相关资料,需要的朋友可以参考下2016-03-03
JavaScript使用Broadcast Channel实现前端跨标签页通信
这篇文章主要为大家详细介绍了JavaScript如何使用Broadcast Channel实现前端跨标签页通信,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
前端边界又拓宽,走进火热的云原生云开发赛道,随着云原生时代的到来,各大厂纷纷上云,下面这篇文章主要给大家介绍了关于前端云原生之微信小程序云服务配置的相关资料,需要的朋友可以参考下2022-05-05
正则表达式描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等,常用于表单验证等,下面这篇文章主要给大家介绍了关于javascript表单验证以及正则表达式的相关资料,需要的朋友可以参考下2023-05-05
前后端分离开发模式中,无论前后端都有可能区分不同的环境配置,下面这篇文章主要给大家介绍了关于uniapp微信小程序多环境配置以及使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要向大家介绍了javascript事件冒泡，以及javascript阻止事件冒泡的实现代码，感兴趣的朋友可以参考一下2016-01-01
最近在搞一个客户端调用activex控件的开发。一些实现方法小结，需要的朋友可以参考下。2010-04-04
uni-app是一个使用Vue.js 开发所有前端应用的框架,下面这篇文章主要给大家介绍了关于微信小程序使用uni-app开发小程序及部分功能实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了如何通过JavaScript语言实现动图表格的生成以及动态效果的实现，文中的示例代码讲解详细，感兴趣的可以了解一下2022-02-02
这篇文章主要为大家详细介绍了js+css3实现简单时钟特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
最新评论