推荐一款在线的Excel表格开发库——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/
