Seniortable NPM

Seniortable

基于 Web 的 JavaScript Canvas 电子表格，它拥有更好的运行和渲染性能，不依赖任何框架，只实现核心引擎，同时提供丰富便捷的 API 给予开发者快速操控引擎的能力。

本项目不提供工具栏界面，开发者需根据自己的场景结合 API 创造属于自己的电子表格应用。

特性

Canvas 高性能渲染
丰富的公有 API
灵活的插件扩展机制
兼容 Excel 功能

安装

npm install seniortable

<div id="seniortable"></div>

import Seniortable from "seniortable";

const ST = new Spreadsheet(document.querySelector('#seniortable'));
ST.loadData({}); // 加载数据
ST.onChange(data => {
  // 检测到数据变化时可以保存到数据库
});

// 默认配置项
{
  showGrid: 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,
    },
  },
}

开发环境

git clone https://github.com/wanglong6/seniortable.git
cd seniortable
npm install
npm run dev

打开浏览器访问 http://127.0.0.1:8080

API 参考手册

公有方法

附录1. 单元格属性列表

属性	值	说明
font-name	string	文本字体
font-size	8 ~ 20	文本字号（单位像素）
font-bold	true / false	字体是否加粗
font-italic	true / false	文本是否斜体
underline	true / false	文本是否有下划线
strike	true / false	文本是否有删除线
color	#FFFFFF	文本颜色十六进制码
bgcolor	#FFFFFF	单元格背景颜色十六进制码
align	left / center/ right	文本水平对齐方式
valign	top / middle/ bottom	文本垂直对齐方式
textwrap	true / false	文本是否自动换行
border	{...}	边框样式对象 `附录2`

附录2. 单元格边框样式对象

属性	值	说明
mode	all / inside / horizontal / vertical / outside / top / bottom / left / right	边框模式
style	thin / medium / thick / dashed / dotted	边框样式
color	#FFFFFF	边框颜色十六进制码