从零开始,SpreadJS 新人学习笔记

摘要:
大家好,我是Fiona,从事前端开发。我非常热爱我的工作,一直在默默地培养我的老板。经过几十年的发展,Excel已经成为当之无愧的数据处理之王。现在我们不仅需要实现它的所有功能,还需要将其嵌入到我们自己的系统中。为了避免996.ICU,我选择了百度:度娘真的很强大,这就是我需要的产品:SpreadJS!哇,想到今年的小目标,我还是有点兴奋。从今天起,我将开始仔细研究这款产品,以回报领导的知识(工资)和奖励(奖励),并每次都做笔记!

Hello,大家好,我是Fiona,从事前端开发工作,我十分热爱我的工作和一直默默栽培我的老板(这段请加粗)

前不久,接到老板的安排:

 从零开始,SpreadJS 新人学习笔记第1张

说实话,接到这个需求,我整个人的状态是这样的:

 从零开始,SpreadJS 新人学习笔记第2张

但是,我不能辜负领导的期待,毕竟这是我最喜爱的工作!(这段请加粗,H1字号)

 

Excel经过数十年的发展,已经成为当之无愧的数据处理之王,如今不但要实现它的全部功能,还要把它嵌入到我们自己的系统中,为了避免 996.ICU,我选择百度一下:

 从零开始,SpreadJS 新人学习笔记第3张

度娘果然强大,这就是我需要的产品:SpreadJS!大家来体验一下,仿佛直接用浏览器打开了Excel一般。>>点击这里,体验一下

 从零开始,SpreadJS 新人学习笔记第4张

果然,老板给予了肯定。看来距离我升职加薪、当上总经理、嫁给高富帅、走上人生巅峰的道路越来越近了。WoW,想想还有点小激动呢~

今年的小目标

从今天起,我要开始好好学习这款产品,为了报答领导的知(薪)遇(资)之(报)恩(酬),并做好每次的学习笔记!

初识SpreadJS

“SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗、纯前端、零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NET、Java、响应式 Web 应用及移动跨平台的表格数据处理和类 Excel 的表格应用开发,为用户提供更快捷、更安全、更熟悉的表格数据处理方式和更友好的类 Excel 操作体验。“

——来自SpreadJS产品官网的介绍

SpreadJS控件下载地址:https://www.grapecity.com.cn/developer/spreadjs

点击网页中的立即试用,输入邮箱获取下载邮件,如下所示:

 从零开始,SpreadJS 新人学习笔记第5张

在收到的邮件中下载SpreadJS免费试用版:

 从零开始,SpreadJS 新人学习笔记第6张

SpreadJS安装包目录结构

├── Spread.Sheets        SpreadJS产品包

│          └── Designer      SpreadJS 表格设计器

│                        ├── Spread.Sheets-Designer.12.0.0.AppImage   [Mac]

│                        ├── Spread.Sheets-Designer.12.0.0.dmg           [Linux]

│                        └── Spread.Sheets-Designer.12.0.0                 [Windows]

│         └── Spread.Sheets.Docs.12.0.0    SpreadJS 表格接口文档

│                        ├── content

│                        └── index   

│         └── Spread.Sheets.Release.12.0.0    SpreadJS 表格 JavaScript 库和演示用例

│                        ├── css              样式文件

│                        ├── definition   TS 引用文件

│                        ├── readme

│                        ├── samples      示例代码(包括原生JS,Angular,Vue,React)

│                        ├── scripts         JS文件

│                        ├── GrapeCity-EULA

│                        └── LICENSE

查看更详细的SpreadJS产品试用包目录结构及说明,请点击这里

从零开始,SpreadJS 新人学习笔记第7张

 

由于我是Windows系统,点击Designer当中的第三个文件,安装了Spread.Sheets 设计器,长这样:

 从零开始,SpreadJS 新人学习笔记第8张

这个设计器还有个在线版的可以参考:https://demo.grapecity.com.cn/spreadjs/excel-online/content/index.html

SpreadJS产品结构组成说明

 从零开始,SpreadJS 新人学习笔记第9张

SpreadJS在线表格编辑器组成说明

 从零开始,SpreadJS 新人学习笔记第10张

添加一个Spread到一个工程目录中

创建以下几个文件路径:

 从零开始,SpreadJS 新人学习笔记第11张

  1. 在css中拷入SpreadJS产品安装包路径下的全部文件:

SpreadJS.Production.V12Spread.SheetsSpread.Sheets.Release.12.0.0css

  1. 在js中拷入以下两个文件:

gc.spread.sheets.all.12.0.0.min.js 和 gc.spread.sheets.resources.zh.12.0.0.min.js

  1. data中准备用来存放数据:

index.html :

 从零开始,SpreadJS 新人学习笔记第12张

完成上述步骤,Spread的表格就展示出来了:

 从零开始,SpreadJS 新人学习笔记第13张

 

OK,今天先记录到这里,下一步计划,我要开始学习SpreadJS的工作簿和表单,先立下这个Flag。

SpreadJS,我一定会征服你的,加油!

免责声明:文章转载自《从零开始,SpreadJS 新人学习笔记》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Tomcat在eclipse中起动成功,主页却打不开easyui tab 关闭下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Vue 3 组件开发:搭建基于 Vite 的在线表格编辑系统(组件集成)

通过前文的学习,我们已经用 Vite 搭建出了Vue 3 的项目原型。今天,我们将基于这个原型,集成 SpreadJS 电子表格组件和在线编辑器组件,使其具备 Excel公式计算、在线导入导出 Excel 文档、数据透视表和可视化分析能力,实现在线表格编辑系统的雏形。 设计思路 · 同时创建SpreadJS 和Designer(表格编辑器)两个组件,用切换...

疫情之下远程办公,开启企业办公的全新时代!

2020年开春,新冠肺炎肆虐,为了切实落实疫情防控,保障业务有序开展,各大企业纷纷出台延期复工政策,被动开启【远程办公】模式。 每一次大的疫情都将深刻改变世界。这也让人不禁好奇:当疫情过后,远程办公能否从非常时期的“不得不”,变成更多企业主动选择的新趋势? 带着这个问题,小编综合分析了国内外“远程办公”现状,以及“远程办公”各细分领域发展,在此推断:未来,...

Vue 3 组件开发:搭建基于SpreadJS的表格编辑系统(功能拓展)

通过环境搭建和组件集成,我们学会使用 Vite 和 SpreadJS ,将在线Excel的编辑功能集成在Vue 3项目中。 本章,我将带领大家继续扩展 Vue 3 这个项目原型,实现数据绑定、模板文件导入/更新/导出和数据透视表等功能,本章的实现思路与上一篇“组件集成”基本类似。 设计思路 · 同时创建SpreadJS 和Designer(表格编辑器)两个...

从零开始,SpreadJS新人学习笔记【第3周】

表单&函数 阔别多日, SpreadJS新人学习笔记,本周起正式回归!(在断更的这一个月中,我为大家先后录制了14期SpreadJS产品入门系列学习视频,希望帮助那些正在学习和使用 SpreadJS 的同学全面、快速地了解产品,并尽快在实际项目中感受到 SpreadJS强大的前端表格功能!这些视频目前已经在GCDN技术论坛中发布,欢迎大家观看学习,...

SpreadJS 纯前端表格控件 V12.2 发布更新

用不到100行代码,在前端实现Excel的全部功能 千万前端开发者翘首企盼,SpreadJS V12.2 终发布更新:六大功能特性,带来更多便利,用不到100行代码,在前端实现Excel的全部功能! SpreadJS 是一款基于 HTML5 的纯前端电子表格控件,以“高速低耗、高度类似Excel、可无限扩展”为产品特色,提供移动跨平台和浏览器支持,同时满...