900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 前端使用xlsx导出数据生成Excel文件

前端使用xlsx导出数据生成Excel文件

时间:2022-03-23 17:59:12

相关推荐

前端使用xlsx导出数据生成Excel文件

xlsx的使用

安装 xlsx引入 xlsx需要导出的数据源将数据源转成需要的二维数组定义 Excel 表头将定义好的表头添加到 body 中1 创建虚拟的 `workbook`2 将二维数组转成 `sheet``!merges` 设置单元格合并`!cols` 设置列宽`!rows` 设置行高3 向` workbook 中添加 sheet`4 导出 `workbook `完整示例:总结

安装 xlsx

xlsx 算是基础版本,不能对单元格进行样式(对齐方式、文字颜色、背景颜色等)的修饰,如果需要修饰单元格,可使用xlsx-js-style

npm i xlsx

引入 xlsx

import xlsx from 'xlsx';

需要导出的数据源

// 一般我们拿到的是从接口中请求到的对象数组,在使用是需要转成二维数组,下面有介绍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 表头

// 根据需要导出的目标 Excel格式,先定义好表头const header = [['一月(01月)'], ['商品名称', '手机客户端', '', '电脑客户端', '', '总计', ''], ['', '销售数量', '销售金额', '销售数量', '销售金额', '销售数量', '销售金额']]

将定义好的表头添加到 body 中

body.unshift(...header);//分别为每一行单元格内的值,需要合并的单元格给一个空值进行站位[['一月(01月)','','','','','','']['商品名称', '手机客户端', '', '电脑客户端', '', '总计', '']['', '销售数量', '销售金额', '销售数量', '销售金额', '销售数量', '销售金额']['商品01', 50, 5000, 30, 3000, 80, 8000]['商品02', 50, 5000, 30, 3000, 80, 8000]['商品03', 50, 5000, 30, 3000, 80, 8000]]

1 创建虚拟的workbook

Excel整个表格可称为workbook

里面的每张表分别是sheet

const workbook = xlsx.utils.book_new();

2 将二维数组转成sheet

// 这里我们举例是用 aoa_to_sheet ,所以是需要将数据源转成一个二维数组const sheet = xlsx.utils.aoa_to_sheet(body);// aoa_to_sheet 是将【一个二维数组】转化成 sheet// json_to_sheet 是将【由对象组成的数组】转化成sheet// table_to_sheet 是将【table的dom】直接转成sheet

!merges设置单元格合并

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中// merges 为一个对象数组,每个对象设定了单元格合并的规则// { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }, 即为一个规则,s:开始位置, e:结束位置, r:行, c:列

!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中

3 向workbook 中添加 sheet

xlsx.utils.book_append_sheet(workbook, sheet, 'sheet名称');// 一个 workbook 允许添加多个 sheet,即可以同时创建多个表// xlsx.utils.book_append_sheet(workbook, sheet2, 'sheet名称2');

4 导出workbook

// 注意:定义导出 excel 的名称时需要加上后缀 .xlsxxlsx.writeFile(workbook, 'excel名称.xlsx');

完整示例:

import xlsx from 'xlsx'; // 引入 xlsx......// 需要导出的数据源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]))// 定义Excel表头const header = [['一月(01月)'],['商品名称', '手机客户端', '', '电脑客户端', '', '总计', ''],['', '销售数量', '销售金额', '销售数量', '销售金额', '销售数量', '销售金额']]body.unshift(...header);// 将定义好的表头添加到 body 中const workbook = xlsx.utils.book_new();// 创建虚拟的 workbookconst sheet = xlsx.utils.aoa_to_sheet(body);// aoa_to_sheet 将二维数组转成 sheetconst 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中,设置行高xlsx.utils.book_append_sheet(workbook, sheet, 'sheet名称'); // 向 workbook 中添加 sheetxlsx.writeFile(workbook, 'excel名称.xlsx'); // 导出 workbook// 注意:定义导出 excel 的名称时需要加上后缀 .xlsx

总结

其中,创建虚拟的 workbook将数组转成 sheet向workbook中添加sheet导出workbook,这四个步骤是必要的。

设置合并单元格设置列宽设置行高是可选的,根据需求进行添加。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。