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

在线excel编辑（luckysheet）

news 2026/4/3 9:10:33

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

//服务器加载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);});
});

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

相关文章：

在线excel编辑（luckysheet）

项目地址&#xff1a;Luckysheet: &#x1f680;Luckysheet &#xff0c;一款纯前端类似excel的在线表格&#xff0c;功能强大、配置简单、完全开源。 可以下载项目使用npm安装运行&#xff0c;也可以用cdn 加载excel文件&#xff08;使用luckyexcel&#xff09;&#xff1a; …...

编程日记 2024/12/28 4:15:38

【ES6复习笔记】Symbol 类型及其应用（9）

一、Symbol 简介 Symbol 是 JavaScript 中的一种基本数据类型&#xff0c;它表示唯一的标识符。Symbol 的主要目的是防止属性名冲突&#xff0c;尤其是在多个代码库或模块中共享对象时。Symbol 值可以用作对象的属性名&#xff0c;这样可以确保属性名是唯一的&#xff0c;不会…...

编程日记 2024/12/28 4:09:32

[原创](Modern C++)现代C++的第三方库的导入方式: 例如Visual Studio 2022导入GSL 4.1.0

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XX 企鹅交流: 643439947 个人网站: 80x86汇编小站 编程生涯: 2001年~至今[共23年] 职业生涯: 21年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、Delphi、XCode、Eclipse…...

编程日记 2024/12/28 4:04:19

【ES6复习笔记】Class类（15）

介绍 ES6 提供了更接近传统语言的写法&#xff0c;引入了 Class&#xff08;类&#xff09;这个概念&#xff0c;作为对象的模板。通过 class 关键字&#xff0c;可以定义类。基本上&#xff0c;ES6 的 class 可以看作只是一个语法糖&#xff0c;它的绝大部分功能&#xff0c;…...

编程日记 2024/12/28 4:03:18

【Golang 面试题】每日 3 题（六）

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…...

编程日记 2024/12/28 3:57:09

openEuler安装OpenGauss5.0

OpenGauss5.0 Linux服务器 极简版 服务器安装 单节点安装 极简版安装 安装准备 获取安装包 下载地址&#xff1a;https://opengauss.org/zh/download/archive/版本选择&#xff1a;5.0.0 (LTS)系统架构&#xff1a;uname -m操作系统&#xff1a;cat /etc/os-release完整性校…...

编程日记 2024/12/28 3:50:02

20241230 机器学习ML -（1）线性回归（scikitlearn）

机器学习ML入门。 线性回归 ScikitLearnLRRidgeLassoElasticNetL2：解决共线性问题 (Colinearity Problem) L1：特征选择（AI的解释） W=XtX XtY (Xw=Y >> XtXw= XtY) 当 COND(Xtx) ~ infinit, 导致inv(XtX)无解 举例： 12 23 46 XtX=[14,28] [28,56] eigVal=det…...

编程日记 2024/12/28 3:46:58

MacOS下TestHubo安装配置指南

TestHubo是一款开源免费的测试管理工具&#xff0c; 下面介绍MacOS私有部署的安装与配置。TestHubo 私有部署版本更适合有严格数据安全要求的企业&#xff0c;支持在本地或专属服务器上运行&#xff0c;以实现对数据和系统的完全控制。 1、Mac 服务端安装 Mac安装包下载地址&a…...

编程日记 2024/12/28 3:45:57

mysql性能问题排查

生产环境 Mysql执行性能分析 问题排查思路通过 performance_schema 分析performance_schema 说明查询 performance_schema 所有表信息performance_schema 相关表 主要相关介绍events_statements_history 分析慢查询 和查询当时状态字段说明 问题排查思路 查询慢SQL日志查询SQL…...

编程日记 2024/12/28 3:43:51

centos单机部署seata

文章目录 场景分析下载seata包启动 场景 centos7.9 jdk17 安装部署seata 分析 jdk和seata的版本对应关系如图 JDK版本 推荐 Seata 版本 理由 JDK 8 任何 Seata 版本 JDK 8 是 Seata 长期支持的版本&#xff0c;兼容性最好。 JDK 11 Seata 1.2.0 适合需要长期支持且性能较高的应…...

编程日记 2024/12/28 3:39:45

YOLOv9-0.1部分代码阅读笔记-lion.py

lion.py utils\lion.py 目录 lion.py 1.所需的库和模块 2.class Lion(Optimizer): 1.所需的库和模块 # Lion优化器是一种新型的神经网络优化算法&#xff0c;由Google Brain团队通过遗传算法发现&#xff0c;全称为EvoLved SIgn MOmeNtum&#xff0c;意为“进化的符号动…...

编程日记 2024/12/28 3:37:43

运行Zr.Admin项目（前端）

1.确认环境信息 我这里装的是node16.17版本的 官网16版本的最新为v16.20.2&#xff0c;下载链接https://nodejs.org/dist/v16.20.2/node-v16.20.2-x64.msi 2.去掉ssl 进入到Zr.Admin项目根目录&#xff0c;进入到ZR.vue 打开package.json 文件&#xff0c;删除启动命令配置中…...

编程日记 2024/12/28 3:35:40

HarmonyOS NEXT 实战之元服务：静态多案例效果（一）

背景&#xff1a; 前几篇学习了元服务&#xff0c;后面几期就让我们开发简单的元服务吧&#xff0c;里面丰富的内容大家自己加&#xff0c;本期案例 仅供参考 先上本期效果图 &#xff0c;里面图片自行替换 效果图1代码案例如下&#xff1a; import { authentication } from…...

编程日记 2024/12/28 3:34:39

go下载依赖提示连接失败

1、现象 Go下载模块提示连接失败 dial tcp 142.251.42.241:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.…...

编程日记 2024/12/28 3:33:38

JS 异步 ( 二、Promise 的用法、手写模拟 Promise )

文章目录 一、Promise 基础Promise 作用Promise 语法Promise 内部状态值 和 链式调用Promise 是否为异步执行Promise 常用函数或属性 二、模拟 Promise&#xff0c;加深理解 一、Promise 基础 Promise 作用 1. 回调地狱 想知道 Promise 的作用&#xff0c; 需要先了解一个概念叫…...

编程日记 2024/12/28 3:25:29

五分钟学会如何在GitHub上自动化部署个人博客（hugo框架 + stack主题）

上一篇文章&#xff1a; 10分钟学会免费搭建个人博客&#xff08;Hugo框架 stack主题&#xff09; 前言 首先&#xff0c;想要实现这个功能的小伙伴需要完成几个前置条件&#xff1a; 有一个GitHub账号安装了git&#xff0c;并可以通过git推送commit到GitHub上完成第一篇文章…...

编程日记 2024/12/28 3:16:21

【ETCD】【实操篇（十五）】etcd集群成员管理：如何高效地添加、删除与更新节点

etcd 是一个高可用的分布式键值存储&#xff0c;广泛应用于存储服务发现、配置管理等场景。为了确保集群的稳定性和可扩展性&#xff0c;管理成员节点的添加、删除和更新变得尤为重要。本文将指导您如何在etcd集群中处理成员管理&#xff0c;帮助您高效地维护集群节点。 目录 …...

编程日记 2024/12/28 3:13:14

灵当CRM uploadfile.php 文件上传致RCE漏洞复现

0x01 产品简介 灵当CRM是一款专为中小企业打造的智能客户关系管理工具，由上海灵当信息科技有限公司开发并运营。广泛应用于金融、教育、医疗、IT服务、房地产等多个行业领域，帮助企业实现客户个性化管理需求，提升企业竞争力。无论是新客户开拓、老客户维护，还是销售过程管…...

编程日记 2024/12/28 3:12:08

Linux下Java通过JNI调用C++

以下为Demo流程 1.创建Java文件 public class HelloWord {// 声明本地方法public native void sayHello();static {// 加载本地库System.loadLibrary("hello");}public static void main(String[] args) {new HelloWord().sayHello();} } 2.编译生成.h头文件 在H…...

编程日记 2024/12/28 3:10:06

解决：excel鼠标滚动幅度太大如何调节？

在excel里为什么滚动一次跳过很多行呢&#xff1f;很不方便。。。 1. 问题&#xff1a; 一开始单元格从第1行开始&#xff1a; 鼠标轻轻滚动一下后&#xff0c;直接跳到第4行&#xff1a; 鼠标在word和浏览器里都是好好的。在excel里为什么不是滚动一次跳过一行呢&#xff…...

编程日记 2024/12/28 3:09:03

GHelper硬件控制工具：华硕笔记本性能优化与系统管理完全指南

GHelper硬件控制工具&#xff1a;华硕笔记本性能优化与系统管理完全指南 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF, Str…...

编程新知 2026/4/3 7:14:16

人脸分析系统快速上手教程：一键部署智能人脸检测工具

人脸分析系统快速上手教程&#xff1a;一键部署智能人脸检测工具 1. 系统介绍与核心功能 1.1 什么是人脸分析系统 人脸分析系统&#xff08;Face Analysis WebUI&#xff09;是一个基于InsightFace框架的智能人脸检测与分析工具。它能够自动识别图片中的人脸&#xff0c;并提…...

编程新知 2026/4/3 6:23:35

intv_ai_mk11效果实测：技术面试题生成能力——覆盖算法/系统设计/行为问题

intv_ai_mk11效果实测&#xff1a;技术面试题生成能力——覆盖算法/系统设计/行为问题 1. 测试背景与模型介绍 intv_ai_mk11是一款基于Llama架构的AI对话助手&#xff0c;拥有7B参数规模&#xff0c;专门针对技术场景进行了优化。本次测试聚焦于其在技术面试题生成方面的能力…...

编程新知 2026/4/3 6:13:10

Pixel Aurora Engine镜像部署：支持RTX 3060及以上显卡的轻量级方案

Pixel Aurora Engine镜像部署&#xff1a;支持RTX 3060及以上显卡的轻量级方案 1. 项目概览 Pixel Aurora Engine是一款专为像素艺术创作设计的AI绘图工作站&#xff0c;采用复古8-bit游戏风格界面&#xff0c;让AI艺术创作变得像玩游戏一样有趣。这个轻量级解决方案特别针对…...

编程新知 2026/4/3 3:51:06

百考通：AI精准驱动数据分析，让数据价值高效落地

在数字化浪潮席卷各行各业的今天&#xff0c;数据已成为核心生产要素&#xff0c;但如何从海量数据中挖掘价值、辅助决策&#xff0c;始终是企业与个人面临的核心难题。传统数据分析流程繁琐、技术门槛高、周期漫长&#xff0c;让许多非专业人士望而却步。百考通&#xff08;ht…...

编程新知 2026/4/3 3:33:00

百川2-13B-4bits量化版API优化：降低OpenClaw任务Token消耗20%

百川2-13B-4bits量化版API优化&#xff1a;降低OpenClaw任务Token消耗20% 1. 问题背景与优化动机 上周在调试OpenClaw自动化流程时&#xff0c;我发现一个奇怪现象&#xff1a;同样的文件整理任务&#xff0c;在不同时段运行时消耗的Token数量差异能达到30%。作为个人开发者&…...

编程新知 2026/4/3 3:32:59

3 个高级思路，让你的 AI 绘画 / 视频从此充满想象力

前言 如今 AI 视频与绘画工具的画质越来越卷&#xff0c;清晰度、光影、细节几乎都已触达天花板。但真正能让人记住、能脱颖而出的作品&#xff0c;靠的从来不是画质&#xff0c;而是想象力。 当所有人都在追求 “大片感” 时&#xff0c;你只需要换一种思路 ——用创意打破平…...

编程新知 2026/4/3 3:22:43

OpenClaw+Phi-3-vision-128k-instruct图文处理实战：本地部署与多模态任务自动化

OpenClawPhi-3-vision-128k-instruct图文处理实战&#xff1a;本地部署与多模态任务自动化 1. 为什么选择这个技术组合&#xff1f; 去年我开始尝试用AI处理日常工作中的图文混合内容时&#xff0c;遇到了一个典型困境&#xff1a;现有的云端多模态服务要么价格昂贵&#xff…...

编程新知 2026/4/3 0:30:23

实战指南：基于快马AI开发具备核心功能的电商比价插件

最近在做一个电商比价插件的开发项目&#xff0c;正好用到了InsCode(快马)平台&#xff0c;整个过程特别顺畅&#xff0c;分享下我的实战经验。 项目背景与需求分析 电商比价插件是很多网购达人的刚需工具。核心要解决三个问题&#xff1a;实时比价、历史价格追踪和降价提醒。传…...

编程新知 2026/4/3 0:10:09

宽带任意阶贝塞尔光束模型与超表面实现案例

宽带任意阶 贝塞尔光束 超表面 模型 fdtd 案例内容&#xff1a;主要包括文章的两个贝塞尔光束模型&#xff0c;一个零阶贝塞尔光束一个一阶贝塞尔光束&#xff0c;采用二氧化钛介质单元执行几何相位来构建&#xff1b; 案例包括fdtd模型、fdtd设计脚本、Matlab计算代码和复现结…...

编程新知 2026/4/2 23:33:12