项目地址：Luckysheet: 🚀Luckysheet ，一款纯前端类似excel的在线表格，功能强大、配置简单、完全开源。
可以下载项目使用npm安装运行，也可以用cdn
加载excel文件（使用luckyexcel）：
1、从本地上传加载（直接在页面中加载luckyexcel.umd.js）
2、从服务器获取（使用node + luckyexcel在后端加载文件）
保存excel文件（使用exceljs）
1、保存到本地（页面中加载exceljs.js，具体方法参考下面文章）
2、保存到服务器
手动：页面添加个保存按钮，然后使用luckysheet.getAllSheets()获取全部数据传到后端。
自动：需要同时配置allowUpdate，loadUrl，updateUrl才可以，此模式不能加载本地文件。
updateUrl使用的websocket协议，提交的数据默认是经过pako压缩的，后端需要解压。
pako解压，exceljs生成excel方法可以参考下面文章：
Luckysheet 实现excel多人在线协同编辑-CSDN博客
表格操作 | Luckysheet文档
src/controllers/server.js · mengshukeji/Luckysheet - Gitee.com
<!DOCTYPE HTML>
<html>
<head>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckyexcel/dist/luckyexcel.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/exceljs/dist/exceljs.js"></script>
<script src="./exportExcel.js"></script>
</head>
<body>
<input type="file" id="myfile"/>
<button onclick="downloadCurrent()">提交</button>
<div id="luckysheetDiv" style="margin:0px;padding:0px;position:absolute;width:100%;height:95%;left: 0px;top: 50px;"></div>
<script>
//从本地加载
var input = document.querySelector('input');
input.addEventListener('change', importExcel);
function importExcel(event) {
var file = event.target.files[0];
// 先确保获取到了xlsx文件file，再使用全局方法window.LuckyExcel转化
LuckyExcel.transformExcelToLucky(
file,
function(exportJson, luckysheetfile){
// 获得转化后的表格数据后，使用luckysheet初始化，或者更新已有的luckysheet工作簿
// 注：luckysheet需要引入依赖包和初始化表格容器才可以使用
luckysheet.create({
container: 'luckysheetDiv', // luckysheet is the container id
data:exportJson.sheets,
title:exportJson.info.name,
userInfo:exportJson.info.name.creator,
lang: 'zh',
hook:{
cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
//监听表格数据变化（可实时提交数据到后端），粘贴的数据和公式数据变化不会触发这个事件
console.info('cellUpdated',r,c,oldValue, newValue, isRefresh)
}
}
});
},
function(err){
logger.error('Import failed. Is your fail a valid xlsx?');
}
);
}
//保存数据
function downloadCurrent(){
exportExcel(luckysheet.getAllSheets(), "abc.xlsx")
return "";
$.ajax({
url: 'http://127.0.0.1/excel_s.php', //接口地址，如果要在后端生成excel文件最好用exceljs
type: 'POST',
headers: { 'Content-Type': 'application/json;' },
data: JSON.stringify({
exceldatas: JSON.stringify(luckysheet.getAllSheets()),
}),
success: function (response) {
alert("保存成功！")
}
})
}
//从服务器获取数据（allowUpdate，loadUrl，updateUrl三个必需都配置才能自动更新）
luckysheet.create({
container: 'luckysheetDiv',
lang: 'zh',
allowUpdate: true,
loadUrl:'http://127.0.0.1:3000',
updateUrl: 'ws://localhost:8273',
});
</script>
</body>
</html>//服务器加载excel文件
const fs = require("fs");
const LuckyExcel = require('luckyexcel');
const express = require('express');
const cors = require('cors');
const app = express();
const hostname = '127.0.0.1';
const port = 3000;
app.use(cors());
app.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
//注意luckysheet使用的是post请求
app.post('/', (req, res) => {
var data = fs.readFileSync("./123.xlsx");
LuckyExcel.transformExcelToLucky(data, function(exportJson, luckysheetfile){
res.set('Content-Type', 'text/html; charset=UTF-8'); //返回类型需要text/html
res.json(exportJson.sheets);
});
});//服务器端保存
const WebSocket = require('ws');
const pako = require("pako");
// 创建 WebSocket 服务器，监听 8080 端口
const wss = new WebSocket.Server({ port: 8273 });
wss.on('connection', function connection(ws) {
console.log('新客户端连接');
// 当收到消息时触发
ws.on('message', function incoming(message) {
console.log('收到来自客户端的消息:');
// 回复客户端
//unzip(message)
//保存数据...
//返回格式参考 https://dream-num.github.io/LuckysheetDocs/zh/guide/operate.html#%E5%90%8E%E7%AB%AF%E8%BF%94%E5%9B%9E%E6%A0%BC%E5%BC%8F
ws.send(`"服器接收到消息"`);
});
// 当连接关闭时触发
ws.on('close', function close() {
console.log('客户端断开连接');
});
});
//解压数据
unzip = (str) => {
let chartData = str
.toString()
.split("")
.map((i) => i.charCodeAt(0));
let binData = new Uint8Array(chartData);
let data = pako.inflate(binData);
return decodeURIComponent(
String.fromCharCode.apply(null, new Uint16Array(data))
);
}
console.log('WebSocket 服务器正在监听端口 8273');
