Logo

菜单

发布于 2026-01-06 5 阅读
0

用不到 10 行代码创建类似 Excel 的 JavaScript 电子表格

用不到 10 行代码创建类似 Excel 的 JavaScript 电子表格

电子表格是存储和计算数据的最重要格式之一，也是专注于在线文档的产品的关键组成部分。

在本篇博客中，我们将学习如何在短短 10 分钟内创建一个功能丰富的 JavaScript 电子表格。

这就是完成后的样子：

电子表格

设置

让我们首先创建一个空项目。create-react-app

如果您已经有一个 React 项目，则可以跳过此步骤。



npx create-react-app my-spreadsheet
Enter fullscreen mode Exit fullscreen mode

或者如果您正在使用yarn



yarn create react-app my-spreadsheet
Enter fullscreen mode Exit fullscreen mode

然后，进入my-spreadsheet文件夹，安装我们的电子表格库。



# using npm
npm install @fortune-sheet/react
# or using yarn
yarn add @fortune-sheet/react
Enter fullscreen mode Exit fullscreen mode

使用库

请替换src/App.js为以下内容



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


function App() {
  return <Workbook data={[{ name: "Sheet1" }]} />
}

export default App;
Enter fullscreen mode Exit fullscreen mode

将以下几行添加到src/index.css



html, body, #root {
  height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

太好了，一切准备就绪！

现在，运行以下命令启动项目



# using npm
npm start
# or using yarn
yarn start
Enter fullscreen mode Exit fullscreen mode

好了！

你可以随意体验并尝试各项功能。

下一个

下一篇文章我们将向您展示如何持久化工作表数据并使其具有协作性，最终效果如下：

合作

该电子表格库完全开源，更多信息请查看：

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

该项目正在积极开发中，欢迎提出反馈意见！

文章来源：https://dev.to/zyc9012/create-excel-like-javascript-spreadsheet-in-less-than-10-lines-of-code-4a5o
使用 JavaScript 自定义...
渐进式 Rails 应用 什么是 ...