AdminPi， 前端， 2021-06-07 20:35:00
在线表格协作平台有很多，但大部分都有一些限制；对于程序员来说，解决限制最好的办法永远不是花钱，而是自己动手搞一套！
今天要介绍的这款插件名叫：Jspreadsheet；它的前身是：Jexcel；采用的授权协议是：MIT license。
Jspreadsheet是一款非常轻量级的javascript电子表格插件，可以创建与Excel兼容的电子表格，数据不仅可以直接从Excel复制粘贴，也可以从JS数组、JSON、CSV和XSLX文件导入；还可以很方便的与jQuery、VUE等框架集成在一起使用。
她的主要特性有：
1.支持多种单元格类型：文本、数字、下拉菜单、日期时间、图片和富文本等；
2.支持公式计算；
3.支持排序、筛选；
4.支持窗口冻结；
5.单元格合并；
6.延时加载；
7.更多等待发现的功能！
官网地址：
https://bossanova.uk/jspreadsheet/v4/
快速参考API：
https://bossanova.uk/jspreadsheet/v4/docs/quick-reference
一个简单的demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jExcel</title>
<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
</head>
<body style="margin:0; padding:0;">
<div id='my-sheet' style="margin:0; padding:0;"></div><br />
<input type="button" value="添加一行" onclick="mySpreadsheet.insertRow()" />
<input type="button" value="添加一列" onclick="mySpreadsheet.insertColumn()" />
<input type="button" value="获取数据" onclick="alert(mySpreadsheet.getData());" /><br />
<script>
data = [
['Q1', '100', '10000'],
['Q2', '200', '20000'],
['Q3', '300', '30000'],
['Q4', '200', '20000']
];
mySpreadsheet = jspreadsheet(document.getElementById('my-sheet'), {
data:data,
columns:[
{ title:'季度', width:100 },
{ title:'销量', width:80 },
{ title:'销售额', width:100 }
]
});
</script>
</body>
</html>带公式计算的demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jExcel</title>
<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
</head>
<body style="margin:0; padding:0;">
<div id='my-sheet1' style="margin:0; padding:0;"></div><br />
<input type="button" value="添加一行" onclick="mySpreadsheet1.insertRow()" />
<input type="button" value="添加一列" onclick="mySpreadsheet1.insertColumn()" />
<input type="button" value="获取数据" onclick="alert(mySpreadsheet1.getData());" /><br />
<script>
data = [
['Q1', '100', '100', '=B1*C1'],
['Q2', '200', '100', '=B2*C2'],
['Q3', '300', '100', '=B3*C3'],
['Q4', '200', '100', '=B4*C4']
];
mySpreadsheet1 = jspreadsheet(document.getElementById('my-sheet1'), {
data:data,
columns:[
{ title:'季度', width:60 },
{ title:'销量', width:80 },
{ title:'单价', width:80 },
{ title:'销售额', width:100 }
]
});
</script>
</body>
</html>带工具栏的demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jExcel</title>
<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css" />
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons" />
</head>
<body style="margin:0; padding:0;">
<div id='my-sheet2' style="margin:0; padding:0;"></div><br />
<input type="button" value="添加一行" onclick="mySpreadsheet2.insertRow()" />
<input type="button" value="添加一列" onclick="mySpreadsheet2.insertColumn()" />
<input type="button" value="获取数据" onclick="alert(mySpreadsheet2.getData());" /><br />
<script>
data = [
['Q1', '100', '100', '=B1*C1'],
['Q2', '200', '100', '=B2*C2'],
['Q3', '300', '100', '=B3*C3'],
['Q4', '200', '100', '=B4*C4']
];
mySpreadsheet2 = jspreadsheet(document.getElementById('my-sheet2'), {
data:data,
columns:[
{ title:'季度', width:60 },
{ title:'销量', width:80 },
{ title:'单价', width:80 },
{ title:'销售额', width:100 }
],
toolbar:[
{
type: 'i',
content: 'undo',
onclick: function() {
mySpreadsheet2.undo();
}
},
{
type: 'i',
content: 'redo',
onclick: function() {
mySpreadsheet2.redo();
}
},
{
type: 'i',
content: 'save',
onclick: function () {
mySpreadsheet2.download();
}
},
{
type: 'select',
k: 'font-family',
v: ['Arial','Verdana']
},
{
type: 'select',
k: 'font-size',
v: ['9px','10px','11px','12px','13px','14px','15px','16px','17px','18px','19px','20px']
},
{
type: 'i',
content: 'format_align_left',
k: 'text-align',
v: 'left'
},
{
type:'i',
content:'format_align_center',
k:'text-align',
v:'center'
},
{
type: 'i',
content: 'format_align_right',
k: 'text-align',
v: 'right'
},
{
type: 'i',
content: 'format_bold',
k: 'font-weight',
v: 'bold'
},
{
type: 'color',
content: 'format_color_text',
k: 'color'
},
{
type: 'color',
content: 'format_color_fill',
k: 'background-color'
},
],
});
</script>
</body>
</html>
注意引用图标样式表！其他更多实用功能，可以参考官网给出的例子。
此文章于 2021-06-08 14:10:06 进行了更新！
© 2024