前端开源自定义报表luckysheet.js
demo实例
代码片
此处增加保存、加载、导入、导出JS
功能配置参考
https://mengshukeji.github.io/LuckysheetDocs/guide/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js"></script>
</head>
<body>
<div>
<div style="float: left;">
<!-- <button onclick="load()">加载</button> -->
<button onclick="save()">保存</button>
</div>
<div style="float: right;">
<input style="font-size:16px;" type="file" id="Luckyexcel-demo-file" name="Luckyexcel-demo-file"
change="demoHandler" />
<button> 导入 </button>
<button> 另存为 </button>
</div>
</div>
<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;left: 0px;top: 50px;bottom: 0px;">
</div>
</body>
</html>
<script>
$(function () {
//Configuration item
var options = {
container: 'luckysheet', // 设定DOM容器的id
title: '', // 设定表格名称
lang: 'zh', // 设定表格语言
showinfobar: false,
}
luckysheet.create(options)
})
var server = {
ws:null,
callbacks:{}, //消息回调函数
init(){
this.ws = new WebSocket("ws://127.0.0.1:11551?uname=test&pwd=123456");
var _ws = this.ws;
var _this = this;
_ws.onopen = function(){
console.log("ws 连接成功!")
//保持连接
setInterval(function(){
_ws.send('ping')
},1000 * 60)
}
_ws.onmessage = function(msg){
msg = msg.data
console.log('<==')
console.log(msg)
if('pong' == msg || '1' == msg){
return
}
var msgObj = JSON.parse(msg)
var callback = _this.callbacks[msgObj.id]
if(callback){
callback(msgObj.data)
}else{
console.log("未处理消息 msg = " + msg)
}
}
_ws.onerror = function(e){
console.warn("连接出错")
console.warn(e)
_ws.close()
}
_ws.onclose = function(){
console.warn("连接断开")
//setTimeout(function(){
// _this.init()
//},1000)
}
},
get(callback){
var id = "id_" + Math.random()
this.callbacks[id] = callback
this.send({
action:'get',
id: id,
})
},
send(msgObj){
var msg = JSON.stringify(msgObj);
this.ws.send(msg)
console.log("==>")
console.log(msg)
},
set(opt,callback){
var id = "id_" + Math.random()
this.callbacks[id] = callback
this.send({
action:'set',
id: id,
data:opt,
})
}
}
server.init()
/** 加载表格 */
function load() {
server.get(function(options){
luckysheet.destroy()
luckysheet.create(JSON.parse(options))
console.log("init...")
})
}
/** 保存表格 */
function save() {
var options = {
title: 'TD游戏配置',
lang: 'zh',
container: 'luckysheet',
showinfobar: false,
data: [],
}
var luckysheetfile = luckysheet.getLuckysheetfile()
if(!luckysheetfile) return;
for (const index in luckysheetfile) {
var sheet = luckysheetfile[index]
options.data[index] = {
name: sheet.name,
index: index,
column: sheet.data[0].length,
row: sheet.data.length,
}
options.data[index].celldata = []
var i = 0;
for (const r in sheet.data) {
for (const c in sheet.data[r]) {
options.data[index].celldata[i++] = {
r: r,
c: c,
v: sheet.data[r][c]
}
}
}
}
server.set(JSON.stringify(options),function(){
console.log("同步成功")
})
}
</script>
如果是Vue项目,具体代码公司内网开发无法分享,简答方法直接在vue项目中使用iframe嵌套HTML也可
注释
由于需要动态监听页面数据变化,选择使用WebSocket 实现实时传输数据