在线excel编辑(luckysheet)
项目地址: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)
项目地址:Luckysheet: 🚀Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。 可以下载项目使用npm安装运行,也可以用cdn 加载excel文件(使用luckyexcel): …...
【ES6复习笔记】Symbol 类型及其应用(9)
一、Symbol 简介 Symbol 是 JavaScript 中的一种基本数据类型,它表示唯一的标识符。Symbol 的主要目的是防止属性名冲突,尤其是在多个代码库或模块中共享对象时。Symbol 值可以用作对象的属性名,这样可以确保属性名是唯一的,不会…...

[原创](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…...
【ES6复习笔记】Class类(15)
介绍 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过 class 关键字,可以定义类。基本上,ES6 的 class 可以看作只是一个语法糖,它的绝大部分功能,…...
【Golang 面试题】每日 3 题(六)
✍个人博客:Pandaconda-CSDN博客 📣专栏地址:http://t.csdnimg.cn/UWz06 📚专栏简介:在这个专栏中,我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话,欢迎点赞👍收藏…...
openEuler安装OpenGauss5.0
OpenGauss5.0 Linux服务器 极简版 服务器安装 单节点安装 极简版安装 安装准备 获取安装包 下载地址:https://opengauss.org/zh/download/archive/版本选择:5.0.0 (LTS)系统架构:uname -m操作系统:cat /etc/os-release完整性校…...
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…...

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

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

centos单机部署seata
文章目录 场景分析下载seata包启动 场景 centos7.9 jdk17 安装部署seata 分析 jdk和seata的版本对应关系如图 JDK版本 推荐 Seata 版本 理由 JDK 8 任何 Seata 版本 JDK 8 是 Seata 长期支持的版本,兼容性最好。 JDK 11 Seata 1.2.0 适合需要长期支持且性能较高的应…...
YOLOv9-0.1部分代码阅读笔记-lion.py
lion.py utils\lion.py 目录 lion.py 1.所需的库和模块 2.class Lion(Optimizer): 1.所需的库和模块 # Lion优化器是一种新型的神经网络优化算法,由Google Brain团队通过遗传算法发现,全称为EvoLved SIgn MOmeNtum,意为“进化的符号动…...

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

HarmonyOS NEXT 实战之元服务:静态多案例效果(一)
背景: 前几篇学习了元服务,后面几期就让我们开发简单的元服务吧,里面丰富的内容大家自己加,本期案例 仅供参考 先上本期效果图 ,里面图片自行替换 效果图1代码案例如下: import { authentication } from…...

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.…...

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

五分钟学会如何在GitHub上自动化部署个人博客(hugo框架 + stack主题)
上一篇文章: 10分钟学会免费搭建个人博客(Hugo框架 stack主题) 前言 首先,想要实现这个功能的小伙伴需要完成几个前置条件: 有一个GitHub账号安装了git,并可以通过git推送commit到GitHub上完成第一篇文章…...

【ETCD】【实操篇(十五)】etcd集群成员管理:如何高效地添加、删除与更新节点
etcd 是一个高可用的分布式键值存储,广泛应用于存储服务发现、配置管理等场景。为了确保集群的稳定性和可扩展性,管理成员节点的添加、删除和更新变得尤为重要。本文将指导您如何在etcd集群中处理成员管理,帮助您高效地维护集群节点。 目录 …...
灵当CRM uploadfile.php 文件上传致RCE漏洞复现
0x01 产品简介 灵当CRM是一款专为中小企业打造的智能客户关系管理工具,由上海灵当信息科技有限公司开发并运营。广泛应用于金融、教育、医疗、IT服务、房地产等多个行业领域,帮助企业实现客户个性化管理需求,提升企业竞争力。无论是新客户开拓、老客户维护,还是销售过程管…...

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…...

解决:excel鼠标滚动幅度太大如何调节?
在excel里为什么滚动一次跳过很多行呢?很不方便。。。 1. 问题: 一开始单元格从第1行开始: 鼠标轻轻滚动一下后,直接跳到第4行: 鼠标在word和浏览器里都是好好的。在excel里为什么不是滚动一次跳过一行呢ÿ…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...

ETLCloud可能遇到的问题有哪些?常见坑位解析
数据集成平台ETLCloud,主要用于支持数据的抽取(Extract)、转换(Transform)和加载(Load)过程。提供了一个简洁直观的界面,以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...
LLM基础1_语言模型如何处理文本
基于GitHub项目:https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken:OpenAI开发的专业"分词器" torch:Facebook开发的强力计算引擎,相当于超级计算器 理解词嵌入:给词语画"…...
高防服务器能够抵御哪些网络攻击呢?
高防服务器作为一种有着高度防御能力的服务器,可以帮助网站应对分布式拒绝服务攻击,有效识别和清理一些恶意的网络流量,为用户提供安全且稳定的网络环境,那么,高防服务器一般都可以抵御哪些网络攻击呢?下面…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库,专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性,并提供了一个通用的框架&…...

七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !
我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

C++实现分布式网络通信框架RPC(2)——rpc发布端
有了上篇文章的项目的基本知识的了解,现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

自然语言处理——文本分类
文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益(IG) 分类器设计贝叶斯理论:线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别, 有单标签多类别文本分类和多…...