引言
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或者下载到本地）
<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/xspreadsheet.css"> <script src="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/xspreadsheet.js"></script>
- NPM安装
npm install x-data-spreadsheet
使用方式
<div id="xspreadsheet"></div>
<script>
x.spreadsheet('#xspreadsheet');
</script>
在浏览器运行结果如图：
或者你也可以使用模块化的方式使用
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,
},
},
}
国际化
<!-- Import via CDN -->
<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.0.13/dist/xspreadsheet.css">
<script src="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/xspreadsheet.js"></script>
<script src="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/locale/zh-cn.js"></script>
<script>
x.spreadsheet.locale('zh-cn');
</script>
或者
// 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'));
上图是我测试中文的
功能
它包含了一些基本用得到的功能
- 撤销和重做
- 背景色
- 格式清除
- 格式化
- 字型
- 字体大小
- 字体粗体
- 字体斜体
- 下划线
- 删除线
- 文本颜色
- 填充颜色
- 边界
- 合并单元格
- 对齐
- 文本换行
- 固定单元格
- 函数
- 调整尺寸行高，宽
- 复制，剪切，粘贴
- 自动填充
- 插入行、列
- 删除行、列
- 数据验证
完整实例代码，可直接运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>x-spreadsheet</title>
<link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/xspreadsheet.css">
<script src="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/xspreadsheet.js"></script>
<script src="https://unpkg.com/x-data-spreadsheet@1.0.21/dist/locale/zh-cn.js"></script>
</head>
<body onload="load()">
<div id="x-spreadsheet-demo"></div>
<script>
function load() {
x.spreadsheet.locale('zh-cn');
var table = x.spreadsheet('#x-spreadsheet-demo', {})
.loadData({
freeze: 'B3',
styles: [{
bgcolor: '#f4f5f8',
textwrap: true,
color: '#900b09',
border: {
top: ['thin', '#0366d6'],
bottom: ['thin', '#0366d6'],
right: ['thin', '#0366d6'],
left: ['thin', '#0366d6'],
},
}, ],
merges: [
'C3:D4',
],
rows: {
1: {
cells: {
0: {
text: 'testingtesttestetst'
},
2: {
text: 'testing'
},
},
},
2: {
cells: {
0: {
text: 'render',
style: 0
},
1: {
text: 'Hello'
},
2: {
text: 'haha',
merge: [1, 1]
},
}
},
8: {
cells: {
8: {
text: 'border test',
style: 0
},
}
}
},
});
table.change((cdata) => {
// console.log(cdata);
console.log(table.validate());
console.log(table);
});
}
</script>
</body>
</html>
兼容性
支持主流浏览器（chrome, firefox, Safari），Edge貌似有问题，本地测试未通过
总结
值得注意的是在Github提供的cdn中版本号较低，在国际化的时候会出现错误，因此在更改官网的cdn版本至1.0.21即可，可以直接使用我上面更改后的，已经亲自测试过，如果你觉得它对你有帮助，请麻烦点赞、转发加关注哟！后续更多实用技巧和工具等着你！
本文暂时没有评论，来添加一个吧(●'◡'●)