共计 2041 个字符，预计需要花费 6 分钟才能阅读完成。
这是一个基于 Web(es6) canvas 构建的轻量级 Excel 开发库
像这样
或者查看 demo
快速入门开发
CDN
你可以直接在 html 静态文件中引入
link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.8/dist/xspreadsheet.css">
script src="https://unpkg.com/x-data-spreadsheet@1.1.8/dist/xspreadsheet.js">script>
script>
x_spreadsheet('#xspreadsheet');
script>
NPM
你可以使用 npm 包的形式安装
npm install x-data-spreadsheet
在 html 中
div id="x-spreadsheet-demo">div>
在 js 中
import Spreadsheet from "x-data-spreadsheet";
const s = new Spreadsheet("#x-spreadsheet-demo")
.loadData({})
.change(data => {
});
s.validate()
默认配置
{
mode: 'edit',
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,
},
},
}
导入和导出
关于如何导出，请 查看 如果需要自定义导出，可以使用 SheetJs 来完成导出，并且再次感谢
绑定事件
简单的事件绑定
const s = new Spreadsheet("#x-spreadsheet-demo")
s.on('cell-selected', (cell, ri, ci) => {});
s.on('cells-selected', (cell, { sri, sci, eri, eci }) => {});
s.on('cell-edited', (text, ri, ci) => {});
快速设定单元格值
通过 instance.cellText(ri,ci,text) 来设定值，调用 reRender() 来刷新，你将会看到数据的变化
const s = new Spreadsheet("#x-spreadsheet-demo")
s.cellText(5, 5, 'xxxx').cellText(6, 5, 'yyy').reRender();
获取选定表格中单元的样式和值
const s = new Spreadsheet("#x-spreadsheet-demo")
s.cell(ri, ci);
s.cellStyle(ri, ci);
快速本地化
如果是在 js 中引入
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'))
可以使用 CDN
link rel="stylesheet" href="https://unpkg.com/x-data-spreadsheet@1.1.8/dist/xspreadsheet.css">
script src="https://unpkg.com/x-data-spreadsheet@1.1.8/dist/xspreadsheet.js">script>
script src="https://unpkg.com/x-data-spreadsheet@1.1.8/dist/locale/zh-cn.js">script>
script>
x_spreadsheet.locale('zh-cn');
script>
加入开发者
git clone https://github.com/myliang/x-spreadsheet.git
cd x-spreadsheet
npm install
npm run dev
浏览器支持
chrome, firefox, Safari
正文完
