当前位置：首页 > article >正文

在线excel编辑（luckysheet）

article 2024/12/26 12:03:19

项目地址：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');

查看全文

http://www.kler.cn/a/452112.html