在线excel编辑(luckysheet)

news/2024/12/29 7:35:09/

项目地址: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 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("保存成功!")}})
}//从服务器获取数据(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>

javascript">//服务器加载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/htmlres.json(exportJson.sheets);});
});

javascript">//服务器端保存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');


http://www.ppmy.cn/news/1559009.html

相关文章

Vue3响应式:Proxy设计原理解析

# Vue3响应式:Proxy设计原理解析 了解Proxy 在Vue3中&#xff0c;由于Proxy的设计原理&#xff0c;使得其响应式系统更加灵活和高效。那么什么是Proxy呢&#xff1f;Proxy是ES6新增的特性&#xff0c;可以用来自定义对象的操作。通过Proxy&#xff0c;我们可以重写对象的默认行…

【magic-dash】01:magic-dash创建单页面应用及二次开发

文章目录 一、magic-dash是什么1.1 安装1.2 使用1.2.1 查看内置项目模板1.2.2 生成指定项目模板1.2.3 查看当前magic-dash版本1.2.4 查看命令说明1.2.5 内置模板列表二、创建虚拟环境并安装magic-dash三、magic-dash单页工具应用开发3.1 创建单页面项目3.1.1 使用命令行创建单页…

【最新】宇鹿家政小程序系统v1.1.3高级版源码全开源+搭建环境

一.系统介绍 一款基于ThinkPHP原生微信小程序开发的家政上门服务系统&#xff0c;支持预约上门、抢单、派单、分销(高级授权)、储值、积分、优惠券等功能&#xff0c;用户端师傅端二合一的家政服务微信小程序。 二.搭建环境 系统环境&#xff1a;CentOS、 运行环境&#xff…

如何在Facebook发布Reels?简单易懂的操作指南

随着短视频风靡全球&#xff0c;Facebook Reels 成为了吸引用户和推广内容的强大工具。无论你是个人创作者还是企业运营者&#xff0c;掌握 Facebook Reels 的发布技巧都能让你的内容更快触达目标受众。本文将详细介绍如何在 Facebook 发布 Reels&#xff0c;帮助你轻松上手这一…

在 Ubuntu 下通过 Docker 部署 MySQL 服务器

简介 Docker 是一个开源的容器化平台&#xff0c;允许开发者将应用及其依赖打包到一个标准化的单元中&#xff0c;确保无论在任何环境中都能保持一致的运行。它极大地简化了应用的部署和管理&#xff0c;特别适合微服务架构。 MySQL 则是一个广泛使用的关系型数据库管理系统&…

微服务——部署与运维

1、你是否有将 Java 微服务部署到容器&#xff08;如 Docker&#xff09;中的经验&#xff1f;请描述一下部署过程和相关注意事项。 部署过程&#xff1a; 编写 Dockerfile&#xff0c;定义基础镜像&#xff08;如 openjdk&#xff09;、应用 JAR 包路径和启动命令。构建镜像…

Spring Boot简单集成fastDFS

FastDFS简介 FastDFS是一个开源的轻量级分布式文件系统&#xff0c;它解决了大容量存储和负载均衡的问题。FastDFS架构包括Tracker server和Storage server。客户端请求Tracker server进行文件上传、下载&#xff0c;Tracker server负责负载均衡和调度&#xff0c;最终由Stora…

BCD编码数据在网络传输中经文本转换的隐患

在计算机网络中&#xff0c;数据对象通常需要转换为适合传输的格式。BCD&#xff08;Binary-Coded Decimal&#xff09;编码的数据如果直接被转成字节数组并通过GBK等字符编码形成字符串进行传输&#xff0c;可能会引起一系列问题&#xff0c;如数据丢失、歪曲和安全性风险。 …