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.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产品试用包目录结构及说明,请点击这里

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

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

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,我一定会征服你的,加油!

从零开始,SpreadJS 新人学习笔记的更多相关文章

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

    表单&函数 阔别多日, SpreadJS新人学习笔记,本周起正式回归!(在断更的这一个月中,我为大家先后录制了14期SpreadJS产品入门系列学习视频,希望帮助那些正在学习和使用 Sprea ...

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

    复制粘贴.单元格格式和单元格类型 本周,让我们一起来学习SpreadJS 的复制粘贴.单元格格式和单元格类型,希望我的学习笔记能够帮助你们,从零开始学习 SpreadJS,并逐步精通. 在此前的学习笔 ...

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

    数据绑定.脏数据和单引号前缀 本周,让我们一起来学习SpreadJS 的数据绑定.脏数据和单引号前缀,希望我的学习笔记能够帮助你们,从零开始学习 SpreadJS,并逐步精通. 在此前的学习笔记中,相 ...

  4. 从零开始,SpreadJS 新人学习笔记(第二周)

    Hello,大家好,我是Fiona.经过上周的学习,我已经初步了解了SpreadJS的目录结构,以及如何创建Spread项目到我的工程目录中.>>还不知如何开始学习SpreadJS的同学, ...

  5. 从零开始的vue学习笔记(一)

    前言 项目要用vue.js,今天开始自学vue.js官方教程,记录下自己的学习摘要,方便后面查阅(此笔记按照学习天数,每天一篇) Vue.js是什么 Vue是一套用于构建用户界面的渐进式框架,Vue ...

  6. 前端新人学习笔记-------html/css/js基础知识点

    即将毕业的软件工程大学生一枚,秋季招聘应聘的是Android,今年来到公司实习,要求做前端开发,所以一切只有现学,现在根据视频来学习,然后开这个博客记录一下自己的学习过程,废话不多说,开写. 4月6日 ...

  7. 从零开始的vue学习笔记(八)

    前言 今天花一天时间阅读完Vue Router的官方文档的基础部分,简单的做一下总结和记录 Vue Router是什么 Vue Router 是 Vue.js 官方的路由管理器,用于构建单页应用(SP ...

  8. 从零开始的vue学习笔记(五)

    单文件组件 Vue.component 来定义全局组件的缺点: 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复 字符串模板 (String te ...

  9. 前端新人学习笔记-------html/css/js基础知识点(三)

    这断时间家里有点事,上班也有点任务,所以几天没看视频没来更新了.今天来更新一下了. 一:默认样式重置 但凡是浏览默认的样式,都不要使用. body,p,h1,h2,h3,h4,h5,h6,dl,dd{ ...

随机推荐

  1. CDQ分治学习思考

    先挂上个大佬讲解,sunyutian1998学长给我推荐的mlystdcall大佬的[教程]简易CDQ分治教程&学习笔记 还有个B站小姐姐讲解的概念https://www.bilibili.c ...

  2. ngx_http_auth_request_module 第三方认证

    shell > vim /usr/local/nginx-1.10.2/conf/vhost/auth.conf # 这是第三方认证服务器,认证逻辑使用的 PHP 代码 server { lis ...

  3. Centos安装成功后配置网络

    一.设置IP地址.网关DNS 说明:CentOS 7.0默认安装好之后是没有自动开启网络连接的! cd /etc/sysconfig/network-scripts/ #进入网络配置文件目录 vi i ...

  4. Java多线程核心知识(跳槽面试必备)

    多线程相对于其他 Java 知识点来讲,有一定的学习门槛,并且了解起来比较费劲.在平时工作中如若使用不当会出现数据错乱.执行效率低(还不如单线程去运行)或者死锁程序挂掉等等问题,所以掌握了解多线程至关 ...

  5. Mybatis 实体类使用@Accessors(chain = true)注解时,对应的mapper xml 报错

    去掉这个注解就行了 应该是 mybatis 会调用实体类的 getter  setter 方法, 返回值可能会有所影响

  6. Nginx事件管理之核心模块ngx_events_module

    1. ngx_events_module核心模块的功能介绍 ngx_events_module 模式是一个核心模块,它的功能如下: 定义新的事件类型 定义每个事件模块都需要实现的ngx_event_m ...

  7. Mybatis不使用Spring框架(Druid)

    1.Mysql database CREATE TABLE mockrecord (id INT(10) unsigned PRIMARY KEY NOT NULL COMMENT 'mock记录编号 ...

  8. idea启动报Plugin Error错误的解决办法(亲测有效)

    今天在idea工作时,idea崩溃自动关闭,再打开时报Plugin Error,tomcat无法启动,于是上网查询,看到这个办法,成功解决了我的问题: 找到IDEA的配置文件夹下的disabled_p ...

  9. 最详细React Native环境配置及项目初始化(2018-10-14)

    注意配环境一定要全程使用稳定VPN工具,否则会浪费大量时间!!!相信我 一.截止到项目初始化之前也就是执行这条命令之前都按官网的方法就可以 https://reactnative.cn/docs/ge ...

  10. 使用EasyPrint实现不预览直接打印功能_非JS打印

    插件地址 github 下载插件,安装后将在注册表中添加EasyPrint的协议 随后可以在开始->运行中输入EasyPrint://1&test 进行测试  参数分为两部分使用[&am ...