code狂魔
V1
2022/11/14阅读:43主题:萌绿
一个星期内疯涨3K star的在线表格
大家好,我是前端实验室
的大师兄!
相信大家都用过再见表格编辑,不知道有没有在真实项目中用过在线表格编辑库?
今天大师兄给大家推荐一款在线的Excel表格开发库x-spreadsheet
,曾在一个星期内获取 3K star

x-spreadsheet
这是一个个人开发的项目,其他的开源开源表格库不能满足作者自己的开发需求,,所以就自己要开发一套类似的 google sheet的在线表格库
并且开源出来,曾在一个星期内获得三千个star
安装
可以使用 npm 包的形式安装
npm install x-data-spreadsheet
或者使用CDN直接在 html 静态文件中引入
<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.css">
<script src="https://unpkg.com/x-data-spreadsheet@1.1.9/dist/xspreadsheet.js"></script>
<script>
x_spreadsheet('#xspreadsheet');
</script>
使用
在html中引入
<div id="x-spreadsheet-demo"></div>
在 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/
最后
欢迎加入前端实验室读者交流群,群里有不少技术大神,不定时会分享一些技术要点,更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~
进群方式:在下方公众号后台,回复 111
,按提示操作即可进群。
关注【前端实验室】公众号回复: bbbb223
即可免费获取拉勾教育价值17999元的全套前端教程

作者介绍
code狂魔
V1