从零开始,SpreadJS|从零开始,SpreadJS 新人学习笔记
Hello,大家好,我是Fiona,从事前端开发工作,我十分热爱我的工作和一直默默栽培我的老板(这段请加粗)。
前不久,接到老板的安排:
文章图片
说实话,接到这个需求,我整个人的状态是这样的:
文章图片
但是,我不能辜负领导的期待,毕竟这是我最喜爱的工作!(这段请加粗,H1字号)
Excel经过数十年的发展,已经成为当之无愧的数据处理之王,如今不但要实现它的全部功能,还要把它嵌入到我们自己的系统中,为了避免 996.ICU,我选择百度一下:
文章图片
度娘果然强大,这就是我需要的产品:SpreadJS!大家来体验一下,仿佛直接用浏览器打开了Excel一般。>>点击这里,体验一下
文章图片
果然,老板给予了肯定。看来距离我升职加薪、当上总经理、嫁给高富帅、走上人生巅峰的道路越来越近了。WoW,想想还有点小激动呢~
今年的小目标
从今天起,我要开始好好学习这款产品,为了报答领导的知(薪)遇(资)之(报)恩(酬),并做好每次的学习笔记!
初识SpreadJS
“SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗、纯前端、零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NET、Java、响应式 Web 应用及移动跨平台的表格数据处理和类 Excel 的表格应用开发,为用户提供更快捷、更安全、更熟悉的表格数据处理方式和更友好的类 Excel 操作体验。“
——来自SpreadJS产品官网的介绍
SpreadJS控件下载地址:https://www.grapecity.com.cn/developer/spreadjs
点击网页中的立即试用,输入邮箱获取下载邮件,如下所示:
文章图片
在收到的邮件中下载SpreadJS免费试用版:
文章图片
SpreadJS安装包目录结构
├── Spread.SheetsSpreadJS产品包
│└── DesignerSpreadJS 表格设计器
│├── 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.0SpreadJS 表格接口文档
│├── content
│└── index
│└── Spread.Sheets.Release.12.0.0SpreadJS 表格 JavaScript 库和演示用例
│├── css样式文件
│├── definitionTS 引用文件
│├── readme
│├── samples示例代码(包括原生JS,Angular,Vue,React)
│├── scriptsJS文件
│├── GrapeCity-EULA
│└── LICENSE
查看更详细的SpreadJS产品试用包目录结构及说明,请点击这里
文章图片
由于我是Windows系统,点击Designer当中的第三个文件,安装了Spread.Sheets 设计器,长这样:
文章图片
这个设计器还有个在线版的可以参考:https://demo.grapecity.com.cn/spreadjs/excel-online/content/index.html
SpreadJS产品结构组成说明
文章图片
SpreadJS在线表格编辑器组成说明
文章图片
添加一个Spread到一个工程目录中
创建以下几个文件路径:
文章图片
- 在css中拷入SpreadJS产品安装包路径下的全部文件:
- 在js中拷入以下两个文件:
- data中准备用来存放数据:
文章图片
完成上述步骤,Spread的表格就展示出来了:
文章图片
OK,今天先记录到这里,下一步计划,我要开始学习SpreadJS的工作簿和表单,先立下这个Flag。
SpreadJS,我一定会征服你的,加油!
【从零开始,SpreadJS|从零开始,SpreadJS 新人学习笔记】转载于:https://www.cnblogs.com/C1SupportTeam/p/11044109.html
推荐阅读
- Docker应用:容器间通信与Mariadb数据库主从复制
- 一个人的碎碎念
- 我从来不做坏事
- 上班后阅读开始变成一件奢侈的事
- 从蓦然回首到花开在眼前,都是为了更好的明天。
- 日志打卡
- 西湖游
- 改变自己,先从自我反思开始
- leetcode|leetcode 92. 反转链表 II
- 从我的第一张健身卡谈传统健身房