这可能是前端处理excel最好的工具了
大家好,我是程序视点的小二哥!
今天小二哥要分享的是一个纯前端实现读取和导出excel文件的工具库:ExcelJS
ExcelJs 简介
功能十分简单:
读取,操作并写入电子表格数据和样式到 XLSX 和 JSON 文件。
一个 Excel 电子表格文件逆向工程项目。
在本文中,我们使用xlsx
文件。xlsx
是Microsoft Excel使用的开放XML电子表格文件格式的文件扩展名。这也是工作中用得最多的一种文件之一。
安装
npm install exceljs
或CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/exceljs.min.js" />
使用
首先,新建工作簿。
const ExcelJS = require('exceljs');
const wb = new ExcelJS.Workbook();
有个这个对象后,接下来的任何操作都是在这个工作簿对象上处理的。
读取
我们从现有的 xlsx
文件中读取。我们假设前两列中有一些数据。
const fileName = 'items.xlsx';
wb.xlsx.readFile(fileName).then(() => {
const ws = wb.getWorksheet('Sheet1');
const c1 = ws.getColumn(1);
c1.eachCell(c => {
console.log(c.value);
});
const c2 = ws.getColumn(2);
c2.eachCell(c => {
console.log(c.value);
});
}).catch(err => {
console.log(err.message);
});
这里注意几个API:
读取工作表
数据,我们使用该函数:
wb.xlsx.readFile(xxx)
获取指定工作表
:
const ws = wb.getWorksheet('Sheet1');
获取某列数据
:
ws.getColumn(1);
迭代每列中单元格的数据
:
c1.eachCell(c => {
console.log(c.value);
});
写入
这里我们写入一个全新的xlsx文件。
const Excel = require('exceljs');
const fileName = 'simple.xlsx';
const wb = new Excel.Workbook();
const ws = wb.addWorksheet('My Sheet');
ws.getCell('A1').value = 'John Doe';
ws.getCell('B1').value = 'gardener';
ws.getCell('C1').value = new Date().toLocaleString();
const r3 = ws.getRow(3);
r3.values = [1, 2, 3, 4, 5, 6];
wb.xlsx
.writeFile(fileName)
.then(() => {
console.log('file created');
})
.catch(err => {
console.log(err.message);
});
向新的工作簿中增加一张工作表
:
const ws = wb.addWorksheet('My Sheet');
向指定单元格写入数据
:
ws.getCell('A1').value = 'John Doe';
向指定行中写入一组数据
:
const r3 = ws.getRow(3);
r3.values = [1, 2, 3, 4, 5, 6];
最后就是写入一个文件:
wb.xlsx
.writeFile(fileName)
.then(() => {
console.log('file created');
})
.catch(err => {
console.log(err.message);
});
其他
ExcelJs
还支持写入多组数据
ws.addRows([
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10],
[11, 12, 13, 14, 15],
[16, 17, 18, 19, 20]]
);
添加列标题
并定义列键和宽度
const headers = [
{ header: 'First name', key: 'fn', width: 15 },
{ header: 'Last name', key: 'ln', width: 15 },
{ heade
r: 'Occupation', key: 'occ', width: 15 },
{ header: 'Salary', key: 'sl', width: 15 },
]
ws.columns = headers;
ExcelJS的功能还远不止这些。
还有如页眉和页脚
,冻结/拆分视图
,自动筛选器
,合并单元格
等。
ExcelJS
还支持读写CSV文件
。
更多内容,请查阅下方链接。
ExcelJS
地址
https://github.com/exceljs/exceljs