这是一个基于 Web(es6) canvas 构建的轻量级 Excel 开发库
说明文档地址
https://hondrytravis.com/x-spreadsheet-doc/doc/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>x-spreadsheet</title>
<link href="xspreadsheet.css" rel="stylesheet"></head>
<body onload="load()">
<div id="x-spreadsheet-demo"></div>
<script>
function load(){
x.spreadsheet('#x-spreadsheet-demo')
.loadData({
freeze: 'C3',
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: '测试', style: 0 },
}
}
},
}).change((cdata) => console.log(cdata));
}
</script>
<script type="text/javascript" src="xspreadsheet.js"></script></body>
</html>
效果