前端使用xlsx导出数据生成Excel文件
2024-04-10 09:06:37
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 = [['一月（2022年01月）'], ['商品名称', '手机客户端', '', '电脑客户端', '', '总计', ''], ['', '销售数量', '销售金额', '销售数量', '销售金额', '销售数量', '销售金额']
]
将定义好的表头添加到 body 中
body.unshift(...header);//分别为每一行单元格内的值，需要合并的单元格给一个空值进行站位
[['一月（2022年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 的名称时需要加上后缀 .xlsx
xlsx.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 = [['一月（2022年01月）'],['商品名称', '手机客户端', '', '电脑客户端', '', '总计', ''],['', '销售数量', '销售金额', '销售数量', '销售金额', '销售数量', '销售金额']
]body.unshift(...header);// 将定义好的表头添加到 body 中
const workbook = xlsx.utils.book_new();// 创建虚拟的 workbook
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中，设置行高xlsx.utils.book_append_sheet(workbook, sheet, 'sheet名称'); // 向 workbook 中添加 sheet
xlsx.writeFile(workbook, 'excel名称.xlsx'); // 导出 workbook
// 注意：定义导出 excel 的名称时需要加上后缀 .xlsx
总结
其中，创建虚拟的 workbook、将数组转成 sheet、向workbook中添加sheet和导出workbook，这四个步骤是必要的。
设置合并单元格、设置列宽、设置行高是可选的，根据需求进行添加。
前端使用xlsx导出数据生成Excel文件相关推荐
- 前端导出excel文件带样式_vue前端使用xlsx导出数据到excel中--最简单的方式
最新项目中需要将页面数据导出到excel中,首先想到的就是度娘,得到的结果都是千篇一律,答案都是你复制我我复制你的,虽然能解决问题,但是这个过程也太复杂. 既然无法改变,那就只好插手你的生活了. 废话 ...
- Java导出数据到Excel文件
Java导出数据到Excel文件 前言 如何导出 导出的基本流程 测试结果 测试数据及结果 测试代码 ExcelExportUtil.class 遇到的问题 lombok的问题 解决 Cell.set ...
- java导出为excel文件_java导出数据到excel文件
有的时候,将一些有用的数据导出到excel是很有必要的.比如说,我现在在做一个学校的在线教学平台,有一个需求是:将学生成绩导出到excel文件中去. 那怎样实现用java导出数据到excel文件呢?? ...
- python根据excel生成报表_Python实现导出数据生成excel报表的方法示例
本文实例讲述了Python实现导出数据生成excel报表的方法.分享给大家供大家参考,具体如下: #_*_coding:utf-8_*_ import MySQLdb import xlwt from ...
- python中excel制作成绩报表,Python实现导出数据生成excel报表的方法示例
本文实例讲述了Python实现导出数据生成excel报表的方法.分享给大家供大家参考,具体如下: #_*_coding:utf-8_*_ import MySQLdb import xlwt from ...
- java 从excel中读取数据_在Java中读取Excel文件的内容和导出数据到Excel文件中
转自www.chianjavaworld.net 原作者:SonyMusic 读:rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr 在Java ...
- python输出数据到excel-python如何导出数据到excel文件
python导出数据到excel文件的方法: 1.调用Workbook()对象中的add_sheet()方法wb = xlwt.Workbook() ws = wb.add_sheet('A Test ...
- 前端利用JS导出数据到Excel表 数字是文本类型 无法计算
问题描述:前端利用JS导出数据到Excel表 数字是文本类型 无法进行公式计算:前端利用JS导出数据到Excel表 数字是文本类型 无法计算 解决办法:参考https://bbs.csdn.net/t ...
- php上传和导出excel文件,(进阶篇)使用PHP导入Excel和导出数据为Excel文件
有时需要将Excel表格的数据导入到mysql数据库中,我们使用PHP的一个开源项目PHP-ExcelReader可以轻松实现Excel的导入. 1.导入XLS PHP-ExcelReader这是一个 ...
- java导出文件到excel文件怎么打开_Java导出数据到Excel文件
Java导出数据到Excel文件需要的jar包:easypoi-0.1.3.jar, poi-3.7-20101029 package com.sais.inkaNet.reportStatistic ...
最新文章
- 【MATLAB】二维绘图 ( 绘制二维图像 | 设置图像样式 )
- al-khaser 调试器，虚拟机检测工具
- 简单的jQuery扩展函数-让函数缓冲执行
- 在腾讯做嵌入式是怎么样的
- .NET中string[]数组和Liststring泛型的相互转换以及Array类的Sort()方法（转）
- 单元格自适应宽度_Excel – 合并单元格时，如何同时保留每个单元格的内容？...
- c语言个人日记本系统的设计,c语言程序课程设计日记本管理系统.doc
- mysql物理备份恢复搭建从库_RDS FOR MYSQL 各版本利用物理备份搭建从库方法
- 《Unity资源加密》（Yanlz+Unity+XR+资源加密+立钻哥哥+==）
- 用手机打开exe文件
- linux系统文件颜色所代表的意思
- Word查找和替换通配符(完全版)
- 解决mysqld: [ERROR] Found option without preceding group in
- Oracle 触发器（tigger）4
- 【c++的hash表和 java的hash表】
- Day-5 python
- 圆满落幕！回顾 eBPF 技术的发展与挑战
- Java GC的标记-清除算法【总结】
- 对Jscript操作注册表接口的一点不解
- 如何在互联网中隐藏自己