x-spreadsheet——Web端优秀的Javascript电子表格

2019-07-15 00:13发布

站内文章 / 前端开发

32 0

啃猪蹄的小仙女

女 | 书童

私信

引言

x-spreadsheet是一款开源的基于Web的Javascript电子表格，在Github获得6k+的star，它在功能上有点类似于google sheet,可以说是简化版的web excel，虽然没excel那么强大，但也能够应付一些需求了。

Github和体验地址

Github：https://github.com/myliang/x-spreadsheet
DEMO：https://myliang.github.io/x-spreadsheet/

安装

提供两种方式

直接引用（使用cdn或者下载到本地）

NPM安装

npm install x-data-spreadsheet

使用方式

在浏览器运行结果如图：

或者你也可以使用模块化的方式使用

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()

所有默认的配置

{
 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,
 },
 },
}

国际化

或者

// npm 
import Spreadsheet from 'x-data-spreadsheet';
import zhCN from 'x-data-spreadsheet/dist/locale/zh-cn';
Spreadsheet.locale('zh-cn', zhCN);
new Spreadsheet(document.getElementById('xss-demo'));