博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
从零开始,SpreadJS 新人学习笔记
阅读量:5311 次
发布时间:2019-06-14

本文共 1705 字,大约阅读时间需要 5 分钟。

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

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

 

 

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

 

 

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

 

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

 

 

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

 

 

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

今年的小目标

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

初识SpreadJS

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

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

SpreadJS控件下载地址:

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

 

 

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

 

 

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

 

 

 

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

 

 

这个设计器还有个在线版的可以参考:

SpreadJS产品结构组成说明

 

 

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

 

 

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

创建以下几个文件路径:

 

 

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

SpreadJS.Production.V12\Spread.Sheets\Spread.Sheets.Release.12.0.0\css

  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 :

 

 

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

 

 

 

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

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

转载于:https://www.cnblogs.com/C1SupportTeam/p/11044109.html

你可能感兴趣的文章
给大家分享一张CSS选择器优选级图谱 !
查看>>
Win7中不能调试windows service
查看>>
通过httplib2 探索的学习的最佳方式
查看>>
快来熟练使用 Mac 编程
查看>>
Node.js 入门:Express + Mongoose 基础使用
查看>>
一步步教你轻松学奇异值分解SVD降维算法
查看>>
使用pager进行分页
查看>>
UVA - 1592 Database
查看>>
Fine Uploader文件上传组件
查看>>
javascript中的传递参数
查看>>
objective-c overview(二)
查看>>
python查询mangodb
查看>>
consonant combination
查看>>
驱动的本质
查看>>
Swift的高级分享 - Swift中的逻辑控制器
查看>>
Swagger简单介绍
查看>>
Python数据分析入门案例
查看>>
vue-devtools 获取到 vuex store 和 Vue 实例的?
查看>>
Linux 中【./】和【/】和【.】之间有什么区别?
查看>>
内存地址对齐
查看>>