百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

2.3K star!解锁在线表格—FortuneSheet

haoteby 2025-03-05 16:13 20 浏览

大家好,我是小墨,在我们日常开发中,能否轻松处理复杂数据,经常取决于有没有一个强大的表格工具。如果有一个在线版的 Excel 或 Google Sheets,不仅功能丰富,还能快速集成到你的项目中,而且“开箱即用”,让你省去繁琐的配置步骤。这就是本期要介绍的开源项目——FortuneSheet。

项目简介

FortuneSheet 是一个类似 Excel 和 Google Sheets 的嵌入式 Javascript 表格库。这个项目继承自 Luckysheet 的代码基础,但它的开发团队做了大量的改进工作,把它转换成了 TypeScript,同时解决了许多原项目中的设计问题。它的目标是打造一个功能强大、易于维护且使用简单的在线表格工具。开发者们希望,通过 FortuneSheet,用户可以轻松实现各种复杂的表格操作,就像用魔法一样简单。

功能特点

1、整个项目都用 TypeScript 开发。

2、可以在一个页面上创建多个表格实例,完美适应复杂应用的需求。而且,FortuneSheet 完全摒弃了 jQuery,改用 React 或 Vue 来管理 DOM 和状态,这让它更轻量化,性能也更优。

3、丰富的表格操作,不管是合并单元格、数据验证,还是复杂的公式计算,FortuneSheet 都游刃有余。你还可以使用类似 Excel 的条件格式,高亮特定的数据,让表格数据一目了然。

4、完美适配移动端,FortuneSheet 都能提供丝滑的表格体验。它还支持多用户实时协同编辑,让团队合作变得前所未有的顺畅。

5、支持导入导出,提供了强大的数据透视表功能,帮你轻松进行数据分析。

使用步骤

1、安装库

npm install @fortune-sheet/react

2、在 HTML 文件中添加一个容器来渲染表格:


小贴士:width 和 height 的值不一定要是 100%,但一定要有值,否则表格区域可能无法显示。

3、在你React 组件中,使用 FortuneSheet 的 Workbook 组件来渲染表格:

import React from 'react';
import ReactDOM from 'react-dom';
import { Workbook } from "@fortune-sheet/react";
import "@fortune-sheet/react/dist/index.css";

// 为我们的表格创建一些样例数据
const sampleData = [
  { name: "Sheet1", data: [[{ v: "Hello" }, { v: "FortuneSheet!" }]] }
];

ReactDOM.render(
  ,
  document.getElementById('app-container')
);

4、通过使用 API后端存储实现实时协同编辑。用户在表格上进行操作时,生成一个 op 列表,通过 onOp 回调发送给后端服务器。

[
    {
        "op": "replace",
        "index": "0",
        "path": ["data", 1, 0, "bl"],
        "value": 1
    }
]

项目地址

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

总结

FortuneSheet 作为一个极具潜力的在线表格组件,特别适合那些需要强大表格功能的项目。无论你是构建企业级应用还是个人项目,FortuneSheet 都能为你提供丰富的功能和极大的灵活性,让你在表格处理上如虎添翼。欢迎在评论区分享你的想法和使用经验!

相关推荐

蜗牛矿机改NAS后远程访问教程,花生壳盒子完美解决

今年不少烧友都在玩星际蜗牛的机器,,我也跟风入手一台,用星际蜗牛改装了一台NAS,在星际蜗牛上安装了多个版本的NAS系统,各方面都不错,就是远程访问功能实现不了。由于本地运营商不提供公网IP,就只能考...

不吹不黑,揭秘网工提升效率的7大神器!

作为一个网络工程师,在日常工作中肯定会使用许多方便的实用软件来提高效率,下面就简单介绍一下网络工程师常用的7种软件。01、FileZilla...

有线网间歇性断网?3个步骤帮你解决 90% 有线网中断问题

有线网络偶尔中断可能由硬件故障、网络设置、线路问题或外部干扰等多种因素导致。一、常见原因及验证方法1.硬件设备...

「这 25 年我被天气 PUA 的日常」

翻出手机相册里每年6月拍的天空,白到发亮的云层下总配着同一句文案:"热到裂开"。掐指一算被高温暴打的四分之一个世纪里,每个夏天都在上演《关于我和天气互相折磨的那些年》。2003年绝对...

数码爱好者必备工具:POWER-Z KM001C多功能测试仪

作为一名数码类爱好者,平时要测试手机、平板、充电器、充电宝等等电子产品,一款好用的测试工具尤为重要。近期,通过充电头网购入了一款POWER-ZKM001C多功能测试仪,主要用来平日里测试快充头和充电...

监控摄像头常用测试命令大全(摄像头测试项目)

以下是监控摄像头在Linux系统中常用的测试命令大全,涵盖设备检测、参数调整、视频录制、网络监控等方面,结合多个来源的信息整理而成:一、摄像头设备检测与调用1.查看摄像头设备①`ls/dev/v...

中级消防设施操作员考试-计算机基础知识学习笔记

消防设施操作员模块八计算机基础课程摘要消防设施操作员模块八主要介绍了计算机基础知识,包括计算机系统的组成和功能、硬件和软件、输入输出设备、外存储器、内存条、中央处理器、机箱等硬件部分,以及系统软件和应...

今日揭秘:上网行为监控软件是如何监控的?7个功能图文介绍

同事A:“哎,你们听说了吗?隔壁部门小王昨天上班刷短视频被领导抓包了!”同事B:“真的假的?公司不是没装摄像头吗?怎么知道的?”...

USB详细介绍(usb简介)

USB概念1.概念USB是通用串行总线(UniversalSerialBus),分为HOST/DEVICE两个角色,所有的数据传输都由主机主动发起,而设备只是被动的负责应答。例如,在读数据时,U...

程序员必备,Fiddler和spy-debugger的远程调试手机APP

背景笔者从事Web开发,不论是PC端还是APP端,调试抓包都是必不可少的环节,懂前端的人都知道,PC端调试非常方便,Chrome或者火狐等浏览器等都自带了非常方便且易于使用的开发者工具,便于我们抓包调...

通用无线网络破解抓包跑包教程(wifi抓包跑包教程)

由于很多的信号很强,但是后面都没有带WPS,怎么办呢,现在我给大家介绍一个简单的抓包跑字典的办法来解决这个难题,首先搜索信号,水滴,关注我的这个应该都会了吧!选择一个信号,点击启动,记住不是点...

抓包神器wireshark安装保姆级教程

简介当我们进行网络抓包时,我们通常需要借助其他的工具进行抓取,比如Charles,fiddler等,今天我们给大家介绍一款同样非常流行的抓包工具——wireshark,本文将介绍wireshark的安...

别让资料拖后腿!STM32开发‘作弊包’开源,工程师直呼内行!

一、开发环境与编译工具...

背完这套 Java 面试八股文,自动解锁面试牛逼症被动技能

前言国内的互联网面试,恐怕是现存的、最接近科举考试的制度。很多人对八股文都嗤之以鼻,认为无法衡量出一个程序员的真是水平。还有一部分人则是深恶痛绝,因为实在太难背了。但是国内大环境如此,互联网IT行...

混合云的多活架构指南(混合云架构图)

文/董晓聪吕亚霖在之前的《如何正确选择多云架构?》一文中介绍了混合云(广义的多云)的诸多架构以及各自的优势,本篇会重点来介绍下混合云下的多活架构。...