今天给大家推荐一款在线的Excel表格开发库——x-spreadsheet,曾在一个星期内获取 3K star
x-spreadsheet
这是一个个人开发的项目，其他的开源表格库不能满足作者自己的开发需求，所以就自己开发一套类似的 google sheet的在线表格库
并且开源出来，曾在一个星期内获得三千个star
安装
可以使用 npm 包的形式安装
npm install x-data-spreadsheet
或者使用CDN直接在 html 静态文件中引入
<script src="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.js"></script>
<script>
x_spreadsheet('#xspreadsheet');
</script>
使用
在html中引入
在 js 中获取dom实例
import Spreadsheet from "x-data-spreadsheet";
// If you need to override the default options, you can set the override
// const options = {};
// new Spreadsheet('#x-spreadsheet-demo', options);
const s = new Spreadsheet("#x-spreadsheet-demo")
.loadData({}) // load data
.change(data => {
// save data to db
});
// data validation
s.validate()
功能
项目已经支持了许多功能，相信你说需要的功能都能满足
- 撤销重做
- 添加行列
- 删除行列
- 隐藏行列
- 动态调整行列功能
- 冻结行列
- 添加边框/颜色/边框线条样式
- 合并单元格
- 复制
- 粘贴
- 打印
- 公式
- 筛选
- 自动填充
- 多表支持
- 字体样式
- 自定义字体/大小/颜色
- 填充前景色/背景色
- 格式校验
- 对齐方式
- 文字换行
配置
项目中有一些默认配置可以直接使用，也可以根据自己的需求，自定义设置
{
mode: 'edit', // edit | read
showToolbar: true,
showGrid: true,
showContextmenu: true,
view: {
height: () => document.documentElement.clientHeight,
width: () => document.documentElement.clientWidth,
},
row: {
len: 100,
height: 25,
},
col: {
len: 26,
width: 100,
indexWidth: 60,
minWidth: 60,
},
style: {
bgcolor: '#ffffff',
align: 'left',
valign: 'middle',
textwrap: false,
strike: false,
underline: false,
color: '#0a0a0a',
font: {
name: 'Helvetica',
size: 10,
bold: false,
italic: false,
},
},
}
中文文档：https://hondrytravis.com/x-spreadsheet-doc/
gitHub：https://github.com/myliang/x-spreadsheet
预览地址：https://myliang.github.io/x-spreadsheet/