Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >四款开源电子表格组件,轻松集成到你的项目

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

作者头像
徐小夕
发布于 2024-06-05 00:03:06
发布于 2024-06-05 00:03:06
2.9K00
代码可运行
举报
文章被收录于专栏:趣谈前端趣谈前端
运行总次数:0
代码可运行

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

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

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

1. fortune-sheet

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

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

基础使用方式如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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

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

基础使用方式如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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

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

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

一个简单的使用案例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 (
    <HotTable
      data={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的开源中后台系统)中,方便大家学习参考。

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

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

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

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

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-05-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 趣谈前端 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
《我的PaddlePaddle学习之路》笔记五——验证码的识别
本次使用的验证码是方正系统,现在很多的大学的教务系统用的就是这个方正系统,刚好既然那么普遍,我们就用它练一练手。经过观察大量的验证码发现,该系统的验证码只有小写的字母和数字,这样分类就少了很多了。该系统的验证码如下:
夜雨飘零
2020/05/06
9100
《我的PaddlePaddle学习之路》笔记四——自定义图像数据集的识别
如果我们要训练自己的数据集的话,就需要先建立图像列表文件,下面的代码是Myreader.py读取图像数据集的一部分,从这些代码中可以看出,图像列表中,图像的路径和标签是以\t来分割的,所以我们在生成这个列表的时候,使用\t就可以了.
夜雨飘零
2020/05/06
7200
《我的PaddlePaddle学习之路》笔记三——CIFAR彩色图像识别
本次项目中使用的是一个32*32的彩色图像的数据集CIFAR-10,CIFAR-10数据集包含10个类的60000个32x32彩色图像,每个类有6000个图像。有50000个训练图像和10000个测试图像。数据集分为五个训练batch和一个测试batch,每个batch有10000个图像。测试batch包含来自每个类1000个随机选择的图像。训练batch按照随机顺序包含剩余的图像,但是一些训练batch可能包含比另一个更多的图像。在他们之间,训练的batch包含每个类别正好5000张图片。
夜雨飘零
2020/05/06
9900
《我的PaddlePaddle学习之路》笔记三——CIFAR彩色图像识别
《PaddlePaddle从入门到炼丹》十一——自定义图像数据集识别
本章将介绍如何使用PaddlePaddle训练自己的图片数据集,在之前的图像数据集中,我们都是使用PaddlePaddle自带的数据集,本章我们就来学习如何让PaddlePaddle训练我们自己的图片数据集。
夜雨飘零
2020/05/01
2K0
基于PaddlePaddle的图像分类实战 | 深度学习基础任务教程系列(一)
图像相比文字能够提供更加生动、容易理解及更具艺术感的信息,图像分类是根据图像的语义信息将不同类别图像区分开来,是图像检测、图像分割、物体跟踪、行为分析等其他高层视觉任务的基础。图像分类在安防、交通、互联网、医学等领域有着广泛的应用。
用户1386409
2019/06/10
7930
基于PaddlePaddle的图像分类实战 | 深度学习基础任务教程系列(一)
《我的PaddlePaddle学习之路》笔记七——车牌端到端的识别
车牌识别的应用场景有很多,比如在停车场。通过车牌识别登记入库和出库的车辆的情况,并计算该车停留时间,然后折算费用。还可以在公路上识别来往的车辆,方便交警的检查等等。接下来我们就是使用PaddlePaddle来做一个车牌识别,我们直接通过段端到端识别,不用分割即可完成识别。在阅读这篇文章时,你应该先阅读上一篇验证码端到端的识别,在上一篇的很多细节,在本篇中不会很说得很细。
夜雨飘零
2020/05/06
7030
《我的PaddlePaddle学习之路》笔记七——车牌端到端的识别
《PaddlePaddle从入门到炼丹》八——模型的保存与使用
本系列教程中,前面介绍的都没有保存模型,训练之后也就结束了。那么本章就介绍如果在训练过程中保存模型,用于之后预测或者恢复训练,又或者由于其他数据集的预训练模型。本章会介绍三种保存模型和使用模型的方式。
夜雨飘零
2020/05/01
1.5K0
《我的PaddlePaddle学习之路》笔记六——验证码端到端的识别
在上一篇文章中介绍了验证码的识别,但是使用的传统的验证码分割,然后通过图像分类的方法来实现验证码的识别的,这中方法比较繁琐,工作量比较多。在本篇文章会介绍验证码端到端的识别,直接一步到位,不用图像分割那么麻烦了。好吧,现在开始吧!
夜雨飘零
2020/05/06
7930
《我的PaddlePaddle学习之路》笔记八——场景文字识别
在前两篇文章验证码端到端的识别和车牌端到端的识别这两篇文章中其实就使用到了场景文字识别了,在本篇中就针对场景文字识别这个问题好好说说。
夜雨飘零
2020/05/06
8560
《我的PaddlePaddle学习之路》笔记八——场景文字识别
《PaddlePaddle从入门到炼丹》九——迁移学习
在深度学习训练中,例如图像识别训练,每次从零开始训练都要消耗大量的时间和资源。而且当数据集比较少时,模型也难以拟合的情况。基于这种情况下,就出现了迁移学习,通过使用已经训练好的模型来初始化即将训练的网络,可以加快模型的收敛速度,而且还能提高模型的准确率。这个用于初始化训练网络的模型是使用大型数据集训练得到的一个模型,而且模型已经完全收敛。最好训练的模型和预训练的模型是同一个网络,这样可以最大限度地初始化全部层。
夜雨飘零
2020/05/01
1.3K0
专栏 | 在PaddlePaddle上实现MNIST手写体数字识别
机器之心专栏 来源:百度PaddlePaddle 不久之前,机器之心联合百度推出 PaddlePaddle 专栏,为想要学习这一平台的技术人员推荐相关教程与资源。在框架解析和安装教程的介绍之后,本次专栏将教你如何在 PaddlePaddle 上实现 MNIST 手写数字识别。 数据集的介绍 如题目所示, 本次训练使用到的是 MNIST 数据库的手写数字, 这个数据集包含 60,000 个示例的训练集以及 10,000 个示例的测试集. 图片是 28x28 的像素矩阵,标签则对应着 0~9 的 10 个数字。
机器之心
2018/05/08
1.1K0
专栏 | 在PaddlePaddle上实现MNIST手写体数字识别
《我的PaddlePaddle学习之路》笔记十一——新版本Fluid的使用
*Fluid版本的使用可以学习笔者的新系列教程:《PaddlePaddle从入门到炼丹》
夜雨飘零
2020/05/06
1.1K0
《我的PaddlePaddle学习之路》笔记九——使用VOC数据集的实现目标检测
目标检测的使用范围很广,比如我们使用相机拍照时,要正确检测人脸的位置,从而做进一步处理,比如美颜等等。在目标检测的深度学习领域上,从2014年到2016年,先后出现了R-CNN,Fast R-CNN, Faster R-CNN, ION, HyperNet, SDP-CRC, YOLO,G-CNN, SSD等神经网络模型,使得目标检测不管是在准确度上,还是速度上都有很大提高,几乎可以达到实时检测。
夜雨飘零
2020/05/06
1.2K0
《我的PaddlePaddle学习之路》笔记九——使用VOC数据集的实现目标检测
《我的PaddlePaddle学习之路》笔记十四——把PaddlePaddle迁移到Android设备上
PaddlePaddle还可以迁移到Android或者Linux设备上,在这些部署了PaddlePaddle的设备同样可以做深度学习的预测。在这篇文章中我们就介绍如何把PaddlePaddle迁移到Android手机上,并在Android的APP中使用PaddlePaddle。
夜雨飘零
2020/05/06
2.8K0
《我的PaddlePaddle学习之路》笔记十四——把PaddlePaddle迁移到Android设备上
全网流行的黑白照片上色技术,看看飞桨开发者是如何实现的
我们都知道,有很多经典的老照片,受限于那个时代的技术,只能以黑白的形式传世。尽管黑白照片别有一番风味,但是彩色照片有时候能给人更强的代入感。本项目通过通俗易懂的方式简单实现黑白照片着色并对部分照片取得不错的着色效果。
用户1386409
2020/11/06
5920
全网流行的黑白照片上色技术,看看飞桨开发者是如何实现的
【深度学习系列】PaddlePaddle之手写数字识别
本文介绍了使用PaddlePaddle(飞桨)进行手写数字识别的示例,并对比了开源框架TensorFlow的相关示例。通过对比实验,发现飞桨的示例代码运行速度更快,同时准确率相当。飞桨的分布式训练支持多机多卡,并且网络结构设计与实现相对简单。尽管飞桨的文档和例子相对较少,但安装过程简单,社区活跃度很高。因此,飞桨是一个值得使用的开源深度学习框架。
Charlotte77
2018/01/09
1.1K0
【深度学习系列】PaddlePaddle之手写数字识别
【深度学习】实例第四部分:PaddlePaddle
注意:全部代码为PaddlePaddle1版本的代码 Helloworld # helloworld示例 import paddle.fluid as fluid # 创建两个类型为int64, 形状为1*1张量 x = fluid.layers.fill_constant(shape=[1], dtype="int64", value=5) y = fluid.layers.fill_constant(shape=[1], dtype="int64", value=1) z = x + y # z只是
杨丝儿
2022/02/28
8930
【深度学习】实例第四部分:PaddlePaddle
【深度学习】用PaddlePaddle进行车牌识别(二)
  上节我们讲了第一部分,如何用生成简易的车牌,这节课中我们会用PaddlePaddle来识别生成的车牌。 ---- 数据读取   在上一节生成车牌时,我们可以分别生成训练数据和测试数据,方法如下(完整代码在这里): 1 # 将生成的车牌图片写入文件夹,对应的label写入label.txt 2 def genBatch(self, batchSize,pos,charRange, outputPath,size): 3 if (not os.path.exists(outputPath))
Charlotte77
2018/04/04
1.5K0
PaddlePaddle实现手写藏文识别
中央民族大学创业团队巨神人工智能科技在科赛网公开了一个TibetanMNIST正是形体藏文中的数字数据集,TibetanMNIST数据集的原图片中,图片的大小是350*350的黑白图片,图片文件名称的第一个数字就是图片的标签,如0_10_398.jpg这张图片代表的就是藏文的数字0。在本项目中我们结合第四章所学的卷积神经网络,来完成TibetanMNIST数据集的分类识别。
夜雨飘零
2020/05/06
2.5K0
手把手教你如何用飞桨自动生成二次元人物头像
每次生成一组shape为[1,72]的随机数,更改其中某个数值,依次生成20组随机数,作为生成网络的输入,得到横向对比图片,观察GAN带来的神奇效果,如下所示。
用户1386409
2020/06/17
8250
手把手教你如何用飞桨自动生成二次元人物头像
推荐阅读
相关推荐
《我的PaddlePaddle学习之路》笔记五——验证码的识别
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验