四款开源电子表格组件,轻松集成到你的项目

hello,大家好,我是徐小夕。之前和大家分享了很多可视化零代码前端工程化的最佳实践,最近在研究在线电子表格的技术实现,发现了几个优质的开源电子表格项目,这里和大家一起分享一下。

同时我也把其中一款电子表格集成到了Next-Admin (基于nextjs的开源中后台系统)中,方便大家学习参考。

494f232664b2e33d6ca3930e90f32416.png

github地址:https://github.com/MrXujiang/next-admin

1. fortune-sheet

eb9847ce5bf4dc091f34b30e99089ae0.gif

FortuneSheet的目标是制造一个功能丰富,配置简单的在线表格组件,开箱即用。项目源于 Luckysheet,并继承了它的很多代码。作者为将其转换为typescript做了很多努力,并且解决了一些原项目设计层面的问题。

但是我个人在研究和使用它的时候还是发现了很多问题,比如在next项目中无法更新和初始化数据,同时对图片的支持也不是特别友好,希望作者看到之后能正视这些问题。

基础使用方式如下:

import React from 'react';
import ReactDOM from 'react-dom';
import { Workbook } from "@fortune-sheet/react";
import "@fortune-sheet/react/dist/index.css"ReactDOM.render(<Workbook data={[{ name: "Sheet1" }]} />,document.getElementById('root')
);

github地址:https://github.com/ruilisi/fortune-sheet

2. x-spreadsheet

102b002044afa49e2bbb95b390886061.gif

x-spreadsheet是一个基于 Web(es6) canvas 构建的轻量级 Excel 开发库, 我们可以使用原生js的方式在项目中引用它,也就意味着它可以在不同的前端框架中使用,比如vuereactangular等。

基础使用方式如下:

import Spreadsheet from "x-data-spreadsheet";
const s = new Spreadsheet("#x-spreadsheet-demo").loadData({}) // load data.change(data => {// save data to db});// data validation
s.validate()

github地址:https://github.com/myliang/x-spreadsheet

3. univer

d6b9fb8485c2d9982144ee2a012e0b2f.png

UniverLuckysheet 底层进行了大量重构,支持非常多的功能,包括但不限于公式计算、条件格式、数据验证、筛选、协同编辑、打印、导入导出等等。

它有商业版本和开源版本,我也使用了一下它的开源版本,但是在Nextjs最新版本中仍然会报错,同时文档上希望能有更详细的API说明,如果作者看到了希望能重视这个问题哈,还是比较看好这个项目。

接下来附上一个在vite中使用的代码案例:

import "./style.css";
import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";import { Univer, UniverInstanceType } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";
import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";
import { UniverUIPlugin } from "@univerjs/ui";const univer = new Univer({theme: defaultTheme,
});univer.registerPlugin(UniverRenderEnginePlugin);
univer.registerPlugin(UniverFormulaEnginePlugin);univer.registerPlugin(UniverUIPlugin, {container: 'app',header: true,footer: true,
});univer.registerPlugin(UniverDocsPlugin, {hasScroll: false,
});
univer.registerPlugin(UniverDocsUIPlugin);univer.registerPlugin(UniverSheetsPlugin);
univer.registerPlugin(UniverSheetsUIPlugin);
univer.registerPlugin(UniverSheetsFormulaPlugin);// create univer sheet instance
univer.createUnit(UniverInstanceType.UNIVER_SHEET, {});

github地址:https://github.com/dream-num/univer

4. handsontable

b9b4a79bd27407dc4651040ade3d9e05.png

handsontable 是一款完全开源的在线电子表格组件,他提供了详细的文档和丰富的API接口来保证我们能实现专业级电子表格:

0370d10efcf886a8933c5bc5ff7f8471.png

它同时支持多种前端框架,比如vue2, vue3, react等,非常适合有技术余力的团队经行二次开发。

一个简单的使用案例:

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';
registerAllModules();// generate an array of arrays with dummy data
const data = new Array(100) // number of rows.fill().map((_, row) => new Array(50) // number of columns.fill().map((_, column) => `${row}, ${column}`));const ExampleComponent = () => {return (<HotTabledata={data}rowHeaders={true}colHeaders={true}contextMenu={true}mergeCells={[{ row: 1, col: 1, rowspan: 3, colspan: 3 },{ row: 3, col: 4, rowspan: 2, colspan: 2 }]}autoWrapRow={true}autoWrapCol={true}licenseKey="non-commercial-and-evaluation"/>);
};export default ExampleComponent;

后面我也考虑基于它来实现一款类似Excel的在线电子表格,实现更强大的功能,并集成到我最近上线的Nocode/WEP项目中。

github地址:https://github.com/handsontable/handsontable

最后

我目前已经把其中一款电子表格集成到了Next-Admin (基于nextjs的开源中后台系统)中,方便大家学习参考。

890e530caab793a91c06f7527394fbd3.png

后续会在 Next-Admin 中集成更多最佳实践,也欢迎感兴趣的朋友交流讨论。

如果你对 next 开发或者需要开发一套管理系统, 我相信 Next-Admin 会给你开发和学习的灵感。

同时也欢迎和我一起贡献, 让它变得更优秀~

github地址:https://github.com/MrXujiang/next-admin

演示地址:http://next-admin.com

由于服务器在国外, 所以建议大家git到本地体验~

欢迎star + 反馈~

f17eceea02e1da7c83477943fabb1ae7.png

往期精彩

  • 零代码+AI的阶段性复盘

  • 文档引擎+AI可视化打造下一代文档编辑器

  • 爆肝1000小时, Dooring零代码搭建平台3.5正式上线

  • 从零打造一款基于Nextjs+antd5.0的中后台管理系统

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/16801.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

influxdb 导出查询数据为csv格式

导出csv格式 influx -username USERNAME -password PASSWORD -precision s -database DB_NAME -execute "select * from "field1","field2","field3" where time >2024-03-01 00:00:00 AND time <2024-04-01 00:00:00 tz(Asia/Shang…

【夏之以寒-Kafka面试 01】每日一练:10道常见的kafka面试题以及详细答案

作者名称&#xff1a;夏之以寒 作者简介&#xff1a;专注于Java和大数据领域&#xff0c;致力于探索技术的边界&#xff0c;分享前沿的实践和洞见 文章专栏&#xff1a;夏之以寒-kafka专栏 专栏介绍&#xff1a;本专栏旨在以浅显易懂的方式介绍Kafka的基本概念、核心组件和使用…

排序题目:最小绝对差

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;最小绝对差 出处&#xff1a;1200. 最小绝对差 难度 2 级 题目描述 要求 给定整数数组 arr \texttt{arr} arr&#xff0c;其中每个元素都不相同&…

太速科技-基于FPGA Spartan6 的双路光纤PCIe采集卡(2路光纤卡)

基于FPGA Spartan6 的双路光纤PCIe采集卡(2路光纤卡) 1、板卡概述   板卡采用xilinx Spartan6系列芯片&#xff0c;支持 PCI Express Base Specification 1.1 x1。内含丰富的逻辑资源和存储单元&#xff0c;板卡FPGA外接双片32M*16bit DDR2缓存器&#xff0c;支持乒乓操作。…

超好用的AI插件—Fitten code【IDEA 和 VScode 安装】

Fitten code安装 Fitten code是什么IDEA从磁盘安装Fitten codeVScode安装Fitten code Fitten code是什么 这是Fitten code官网&#xff0c;功能还是很多的&#xff0c;包括代码自动补全、自动添加注释、智能bug查找等等&#xff1a; Fitten Code是由非十大模型驱动的AI编程助手…

什么是JS引擎

JS引擎&#xff08;JavaScript引擎&#xff09;是负责在浏览器或Node.js等环境中解析和执行JavaScript代码的软件组件。它是JavaScript运行时的核心&#xff0c;将JavaScript代码转换为机器语言&#xff0c;使其能够在计算机上执行。 不同的浏览器和运行环境使用不同的JS引擎。…

视频号小店应该怎么操作呢?不了解的小伙伴快来看!

大家好&#xff0c;我是电商小V 普通人想利用视频号小店赚钱&#xff0c;奈何自己不会直播&#xff0c;不会拍视频&#xff0c;那么普通人应该怎么在视频号中赚钱呢&#xff1f;今天咱们就来详细的说一下&#xff0c; 其实不直播&#xff0c;不拍视频也是可以在视频号上面卖货赚…

Microsoft Remote Desktop for Mac:你的跨平台远程连接利器

Microsoft Remote Desktop for Mac是一款专为Mac用户设计的远程桌面连接工具&#xff0c;它凭借卓越的性能和多项实用功能&#xff0c;成为了跨平台远程协作的首选工具。 多平台支持&#xff1a;Microsoft Remote Desktop for Mac不仅支持与其他Mac设备进行连接&#xff0c;还…

Linux入侵应急响应与排查

入侵者在入侵成功后&#xff0c;往往会留下后门以便再次访问被入侵的系统&#xff0c; 而创建系统账号是一种比较常见的后门方式。 查询特权用户特权用户(uid 为0) awk -F: $30{print $1} /etc/passwd 查找远程可以登录的账户 awk /\$1|\$5|\$6/{print $1} /etc/shadow $1&a…

合并当前目录下的视频和音频文件

合并当前目录下的视频和音频文件。 要求&#xff1a;同一文件夹个&#xff0c;只能放置1个音频文件和1个视频文件&#xff0c;并且音频是给视频配音的等时间长度的。 import osprint(os.getcwd()) # 获取当前工作目录路径dirpathos.getcwd()import moviepy from moviepy.edit…

Less语言

Less是一门预编译语言&#xff0c;它扩展了CSS语言&#xff0c;增加了变量、Mixin、函数等特性&#xff0c;使CSS更易维护和扩展 Less也扩充了CSS语言&#xff0c;增加了诸如变量、混合运算、函数等功能。Less既可以运行在服务端(Node.js和Rhino平台)也可以运行在客户端(浏览器…

前端面试项目细节重难点(已工作|做分享)

面试官提问&#xff1a;需求场景&#xff1a;页面上有一个单选框&#xff0c;有是否两个选项&#xff1a;当用户选择是&#xff0c;出现一个输入框&#xff0c;用户可以输入内容&#xff0c;给后端的保存接口传入参数radio和content这两个字段&#xff0c;值分别是用户选项和输…

[前端] 爷孙组件隔代组件的通信 (笔记,持续更新)

参考文献 记一次爷孙组件隔代组件的通信之emit与on

热点不等人!运营必须掌握的4大技巧

作为运营&#xff0c;抓住热点是吸引读者关注和增加曝光率的有效手段。但是&#xff0c;你知道怎么样才能更好地追热点吗&#xff1f; 今天&#xff0c;就分享四个追热点的技巧&#xff0c;帮助你更好地利用热点话题来提高账号热度。 1、短期内求快 对于运营者来说&#xff…

数据集005:螺丝螺母目标检测数据集(含数据集下载链接)

数据集简介 背景干净的目标检测数据集。 里面仅仅包含螺丝和螺母两种类别的目标&#xff0c;背景为干净的培养皿。图片数量约420张&#xff0c;train.txt 文件描述每个图片中的目标&#xff0c;label_list 文件描述类别 另附一个验证集合&#xff0c;有10张图片&#xff0c;e…

【二分查找 位运算】3145. 大数组元素的乘积

本文涉及知识点 二分查找算法合集 位运算、状态压缩、枚举子集汇总 LeetCode3145. 大数组元素的乘积 一个整数 x 的 强数组 指的是满足和为 x 的二的幂的最短有序数组。比方说&#xff0c;11 的强数组为 [1, 2, 8] 。 我们将每一个正整数 i &#xff08;即1&#xff0c;2&am…

Cocos Creator 声音播放与管理详解

Cocos Creator 是一款非常流行的游戏开发引擎&#xff0c;它提供了丰富的功能和工具&#xff0c;让开发者可以轻松构建出高质量的游戏。在游戏开发中&#xff0c;声音是一个非常重要的元素&#xff0c;可以为游戏增添氛围和趣味性。在本文中&#xff0c;我们将详细介绍Cocos Cr…

React hooks - useState

useState 用法特点注意事项 在hooks出现之前&#xff0c;react的函数式组件也叫做无状态组件&#xff08;函数里面无法创建属于自己的状态&#xff0c;只能使用props接收&#xff09; 用法 一个管理状态的 hooks&#xff0c;能让函数组件拥有自己的状态&#xff0c;实现状态的…

Lookin高效调试iOS App的UI

Lookin是一款iOS开发时常用的调试软件&#xff0c;由腾讯微信读书团队QMUI开发。 它可以查看和修改iOS App里的UI对象的软件&#xff0c;展示App UI图层&#xff0c;类似于Xcode自带的UI Inspector工具&#xff0c;或另一款叫做Reveal的软件。 此外&#xff0c;虽然Lookin主体…

内存泄漏案例分享4-异步任务流内存泄漏

案例4——异步任务内存泄漏 异步任务&#xff0c;代指起子线程异步完成一些数据操作、网络接口请求等&#xff0c;通常会使用以下API&#xff1a; Runnbale&#xff0c;Thread,线程池RxJavaHandlerThread 而这些异步任务很有可能操作内存泄漏&#xff0c;下面我们以Rxjava为…