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

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

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

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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
最强国产开源电子表格-Luckysheet,强势登顶Github trending第一名!
现在web技术蓬勃发展,办公应用特别是excel都搬到了线上,比较流行的有腾讯文档,金山文档,石墨文档,google doc,属于企业服务。但是小型企业或者团队,如果想自己搭建一套在线表格系统呢?有没有开源的方案?
前端开发博客
2020/11/05
3.2K0
最强国产开源电子表格-Luckysheet,强势登顶Github trending第一名!
JavaScript前端电子表格处理神器 SheetJS
SheetJS 是一个基于 JavaScript 的表格处理库,它支持各种表格文件格式,包括 Excel、CSV 等。SheetJS 适用于浏览器和 Node.js,拥有强大的电子表格解析功能,即使电子表格很大,也可以轻松处理。此外,SheetJS 支持大量的电子表格格式,如 OpenDocument 等。
Tinywan
2024/01/02
2.2K0
JavaScript前端电子表格处理神器 SheetJS
基于luckysheet实现在线电子表格和Excel在线预览
本文基于luckysheet实现在线的电子表格,并基于luckyexcel实现excel文件的导入和在线预览。
牛老师讲GIS
2024/12/30
8450
基于luckysheet实现在线电子表格和Excel在线预览
19K Star大公司都在用的开源电子表格组件
开源日记
2024/04/19
5580
19K Star大公司都在用的开源电子表格组件
Next-Admin,一款基于Nextjs开发的开箱即用的中后台管理系统(全剧终)
hello,大家好,我是徐小夕。之前和大家分享了很多可视化,零代码和前端工程化的最佳实践,今天继续分享一下最近开源的 Next-Admin 项目的最新更新。
徐小夕
2024/06/05
4K0
Next-Admin,一款基于Nextjs开发的开箱即用的中后台管理系统(全剧终)
再见Excel!我开源了一款与Python深度集成的神器级IDE
这是一款与 Python 深度集成、基于 Web 开发、无需在各个工具之间切换、适用大部分职业工作场景的开源电子表格应用程序。对它的评价只有 Wow awesome,amazing!
深度学习与Python
2019/09/19
2.4K0
再见Excel!我开源了一款与Python深度集成的神器级IDE
13.8K Star开源!这个电子表格厉害了
开源日记
2024/06/11
1.3K0
13.8K Star开源!这个电子表格厉害了
【图解】Web前端实现类似Excel的电子表格
本文将通过图解的方式,使用纯前端表格控件 SpreadJS 来一步一步实现在线的电子表格产品(例如可构建Office 365 Excel产品、Google的在线SpreadSheet)。 工具简介:
葡萄城控件
2018/01/10
9.9K0
【图解】Web前端实现类似Excel的电子表格
如何写成高性能的代码(一):巧用Canvas绘制电子表格
Canvas是HTML5的标签,是HTML5的一种新特性,又称画板。顾名思义,我们可以将其理解为一块画布,支持在上面绘制矩形、圆形等图形或logo等。 需要注意的是,与其他标签不同,Canvas只是一块空画布,其本身是不能绘制图形的,必须通过JavaScript 脚本进行绘制。
葡萄城控件
2022/09/29
2.4K0
如何写成高性能的代码(一):巧用Canvas绘制电子表格
Python 自动化指南(繁琐工作自动化)第二版:十三、使用 EXCEL 电子表格
Excel 是一个流行且功能强大的 Windows 电子表格应用。openpyxl模块允许您的 Python 程序读取和修改 Excel 电子表格文件。例如,您可能有从一个电子表格中复制某些数据并粘贴到另一个电子表格中的枯燥任务。或者,您可能必须遍历数千行,然后只挑选出其中的一小部分,根据某些标准进行小的编辑。或者你可能不得不查看数百份部门预算的电子表格,寻找任何赤字。这些正是 Python 可以为您完成的那种枯燥、无需动脑的电子表格任务。
ApacheCN_飞龙
2023/04/04
19.2K0
Python 自动化指南(繁琐工作自动化)第二版:十三、使用 EXCEL 电子表格
电子表格调研
电子表格可以输入输出、显示数据,也利用公式计算一些简单的加减法。可以帮助用户制作各种复杂的表格文档,进行繁琐的数据计算,并能对输入的数据进行各种复杂统计运算后显示为可视性极佳的表格,同时它还能形象地将大量枯燥无味的数据变为多种漂亮的彩色商业图表显示出来,极大地增强了数据的可视性。本次调研主要是为了进一步了解市面上的电子表格的功能,为表格优化打基础。
万能数据的小草
2020/02/17
2.1K0
.NET开源快速、强大、免费的电子表格组件
今天大姚给大家分享一个.NET开源(MIT License)、快速、强大、免费的电子表格组件,支持数据格式、冻结、大纲、公式计算、图表、脚本执行等。兼容 Excel 2007 (.xlsx) 格式,支持WinForm、WPF和Android平台:ReoGrid。
追逐时光者
2024/03/16
4120
.NET开源快速、强大、免费的电子表格组件
表格技术七十二变|手把手教你用Canvas电子表格做电子签名
日常生活工作学习中,大家对电子表格必定不陌生。从工作数据汇总分析到出门收据各种电子发票,这些都是由电子表格制作出来的。
葡萄城控件
2021/08/13
2.3K0
表格技术七十二变|手把手教你用Canvas电子表格做电子签名
Excel高手齐聚拉斯维加斯,展开电子表格大战
下周在拉斯维加斯,AWS Re:Invent 大会附近,世界顶尖的电子表格高手将争夺数千美元的奖金。
云云众生s
2024/11/29
1400
一个开源的协作解决方案,可用于在线编辑Excel、Word、思维导图
今天给大家一个开源的协作解决方案Univer,Univer是一套基于 Canvas 的前端框架,用于构建文档、电子表格和幻灯片。使用Univer用户可以同步在自己的系统中查看和编辑 Microsoft Office 文件,避免上传和下载 PPT、Word、Excel。
郑子铭
2023/09/08
4.8K0
一个开源的协作解决方案,可用于在线编辑Excel、Word、思维导图
构建基于React18的电子表格程序
2022年3月29日,React正式发布18.0.0。本次升级内容包括开箱即用的改进,如自动批处理、新的API(如startTransition)和支持Suspense 的流式服务器端渲染。关于此次发布新增的功能可以参考官方文档。
葡萄城控件
2022/06/12
1.9K0
构建基于React18的电子表格程序
chatGpt即将取代你——chatGpt做技术调研
这些框架都是开源的,可以自由使用和修改,适合于创建各种类型的在线电子表格应用程序。
爱吃大橘
2023/03/17
3K0
电子表格实战锦囊:巧用稀疏数组是关键!
前文中我们详细介绍过稀疏数组的那些事儿,以及在实际项目中,稀疏数组如何在前端电子表格中发挥出它最大的效果。而这次,我们将从实战应用出发,为大家介绍稀疏数组在前端中的具体应用。
葡萄城控件
2022/05/09
8310
电子表格实战锦囊:巧用稀疏数组是关键!
从服务端生成Excel电子表格(Node.js+SpreadJS)
Node.js是一个基于Chrome V8引擎的JavaScript运行环境,通常用于创建网络应用程序。它可以同时处理多个连接,并且不像其他大多数模型那样依赖线程。
葡萄城控件
2022/05/09
3.4K0
从服务端生成Excel电子表格(Node.js+SpreadJS)
使用VUE组件创建SpreadJS自定义单元格(一)
作为近五年都冲在热门框架排行榜首的Vue,大家一定会学到的一部分就是组件的使用。前端开发的模块化,可以让代码逻辑更加简单清晰,项目的扩展性大大加强。对于Vue而言,模块化的体现集中在组件之上,以组件为单位实现模块化。
葡萄城控件
2022/05/09
1.5K0
使用VUE组件创建SpreadJS自定义单元格(一)
推荐阅读
相关推荐
最强国产开源电子表格-Luckysheet,强势登顶Github trending第一名!
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验