自助网站建设系统源码,南宁企业网站制作哪家好,中兴建设云南有限公司网站,达州seo项目地址#xff1a;Luckysheet: #x1f680;Luckysheet #xff0c;一款纯前端类似excel的在线表格#xff0c;功能强大、配置简单、完全开源。 可以下载项目使用npm安装运行#xff0c;也可以用cdn
加载excel文件#xff08;使用luckyexcel#xff09;#xff1a; …项目地址Luckysheet: Luckysheet 一款纯前端类似excel的在线表格功能强大、配置简单、完全开源。 可以下载项目使用npm安装运行也可以用cdn
加载excel文件使用luckyexcel
1、从本地上传加载直接在页面中加载luckyexcel.umd.js
2、从服务器获取使用node luckyexcel在后端加载文件 保存excel文件使用exceljs
1、保存到本地页面中加载exceljs.js具体方法参考下面文章
2、保存到服务器
手动页面添加个保存按钮然后使用luckysheet.getAllSheets()获取全部数据传到后端。
自动需要同时配置allowUpdateloadUrlupdateUrl才可以此模式不能加载本地文件。 updateUrl使用的websocket协议提交的数据默认是经过pako压缩的后端需要解压。 pako解压exceljs生成excel方法可以参考下面文章 Luckysheet 实现excel多人在线协同编辑-CSDN博客 表格操作 | Luckysheet文档 src/controllers/server.js · mengshukeji/Luckysheet - Gitee.com
!DOCTYPE HTML
html
headlink relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/plugins/css/pluginsCss.css /link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/plugins/plugins.css /link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/css/luckysheet.css /link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/assets/iconfont/iconfont.css /script srchttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/plugins/js/plugin.js/scriptscript srchttps://cdn.jsdelivr.net/npm/luckysheetlatest/dist/luckysheet.umd.js/scriptscript srchttps://cdn.jsdelivr.net/npm/luckyexcel/dist/luckyexcel.umd.js/scriptscript srchttps://cdn.jsdelivr.net/npm/exceljs/dist/exceljs.js/scriptscript src./exportExcel.js/script/head
bodyinput typefile idmyfile/
button onclickdownloadCurrent()提交/buttondiv idluckysheetDiv stylemargin:0px;padding:0px;position:absolute;width:100%;height:95%;left: 0px;top: 50px;/divscript
//从本地加载
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 iddata: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文件最好用exceljstype: POST,headers: { Content-Type: application/json; },data: JSON.stringify({exceldatas: JSON.stringify(luckysheet.getAllSheets()),}),success: function (response) {alert(保存成功)}})
}//从服务器获取数据allowUpdateloadUrlupdateUrl三个必需都配置才能自动更新
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; charsetUTF-8); //返回类型需要text/htmlres.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%8Fws.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);
