优秀！前端导出Excel就是这么简单！

哈喽，大家好！我是前端实验室的小师妹!

最近好忙呀！新需求来了，又不能开心的摸鱼了...

话说前端导出Excel的需求还是蛮多的，我这不就遇到了嘛，于是本着开源的精神，打开了全球最大的同性交友平台...

最终筛选出俩款能满足我需求的开源库，又从中找到了我的真命天子！

XLSX 这个库是真的强大！但是...默认不支持修改样式，除非升级为Pro用户,看看自己的钱包...算了吧！感兴趣的朋友可以自己去看一看咯~

ExcelJS 拥有9.5K的Star，看了下基本功能都有，而且文档也蛮完善的，集成起来也比较简单，稳了！你就是我的真命天子了！

ExcelJS介绍和安装

ExcelJS 是一个 Node.js 模块，可用来读写和操作 XLSX 和 JSON 电子表格数据和样式。

安装ExcelJS

npm install exceljs

安装file-saver （为什么要使用file-saver呢，且看下文）

npm install file-saver

ExcelJS基本使用

1.创建工作簿

workbook：你可以理解为整个Excel表格。

const workbook = new ExcelJS.Workbook();

2.设置工作簿属性

通过1创建完工作簿后还可以设置工作簿的属性。

workbook.creator = 'Me';
workbook.lastModifiedBy = 'Her';
workbook.created = new Date(1985, 8, 30);
workbook.modified = new Date();
workbook.lastPrinted = new Date(2016, 9, 27);

3.添加工作表

Worksheet：就是Excel表中的sheet页。通过addWorksheet函数创建工作表。

const sheet = workbook.addWorksheet('My Sheet');

你也可以使用addWorksheet函数的第二个参数来置顶工作表的选项，比如：

// 创建带有红色标签颜色的工作表
const sheet = workbook.addWorksheet('My Sheet', {properties:{tabColor:{argb:'FFC0000'}}});

// 创建一个隐藏了网格线的工作表
const sheet = workbook.addWorksheet('My Sheet', {views: [{showGridLines: false}]});

你还可以通过Worksheet.columns设置表格列标题并定义键和宽度；通过Row添加一行或多行数据

# 设置表头
worksheet.columns = [
  { header: 'Id', key: 'id', width: 10 },
  { header: 'Name', key: 'name', width: 32 },
  { header: 'D.O.B.', key: 'DOB', width: 10 }
];

# 添加数据
const data = [
 [1, 'electron','DOB']
 [2, 'exceljs', 'DOB]
];
worksheet.addRows(data);

4.导出表格XLSX文件

workbook.xlsx.writeFile(filename);

结果发现报错了？

这就是我们使用file-saver的原因啦，workbook.xlsx.writeFile(filename)是在node端用的,

所以你应该这样使用:

workbook.xlsx.writeBuffer().then(data => {
  FileSaver.saveAs(new Blob([data],{type:''}),'text.xlsx');
})

这样，一个简单的Excel就导出啦，我的自定义样式等等功能也实现了，可以继续快来摸鱼啦！

项目地址：https://github.com/exceljs/exceljs

还有更多强大的功能小伙伴们自己探索噢！

如果你有好用的Excle相关的库也可以在评论区讨论~

写在最后

欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

进群方式：在下方公众号后台，回复111，按提示操作即可进群。

如果该文章对你有帮助，那么就点击右下角的 [点赞]「在看」，给一个小小的鼓励吧~