新人Demo日记【自定义报表】01-SpreadJS环境搭建

JoestarXu

本帖最后由 JoeJin 于 2023-5-11 13:58 编辑

近期需要通过SpreadJS和GCExcel做一个自定义报表Demo。所以学习了一波SpreadJS和GCExcel，作为新人（一个没怎么学过前端和JAVA的小白）在这里总结一下自己的学习过程分享给大家，希望能帮助新人小伙伴少踩坑。结尾有附件，是学习完的结果，大家可以下载参考。

做个简单做个自己的技术栈介绍，这样大家方便对号入座。

会一丁丁C#，但是不会Java
会一丢丢HTML, JS 和 CSS
会一捏捏React
会一点点Excel
会一猫猫数据库（但是这个好像没啥用）

基本就是以上这样了。下来就开始吧。

作为第一期，我们可能需要先思考一下都要做什么。
首先报表可能需要一些数据源，因此我们第一大块是要做数据源。
其次，我们可能要考虑数据的展示，报表得把数据加工之后展示出来。
最后，可能得有导出，通常报表会有打印或者保存的需求，导出成PDF或者Excel可能是需要的了。

那废话不多说，先把环境搞一下吧。看了一下SpreadJS里有React的例子，那我们就做一个React的前端工程吧。

上npm，先新建一个叫report-demo的react工程。（使用命令之前，需要安装nodejs和npm，不会的小伙伴，可以度娘一下如何安装）

npx create-react-app report-demo

复制代码

经过漫长的等待之后，我们用visual studio code（VSC）打开新建的工程folder。
image.png930602111.png

使用ctrl+`，打开VSC的命令行，执行一下命令

npm start

复制代码

Nice，这样我们就有了一个react的环境，可以在这个基础上开启我们的SpreadJS之旅了。

OK，下来让我们把SpreadJS加入到这个工程里，因为我们是本地做开发不涉及再发布，那我们使用评估版就可以了，先把license花钱的事情丢在一边就好。
回到VSC，在命令行里按 ctrl+c 把nodejs停下来。
友情提示，按了ctrl+c以后，会提示是否要停止，输入y就可以了。
image.png633100585.png

下来我们要把SpreadJS引入到工程里。来，上命令~
分别执行以下两个命令：

npm install @grapecity/spread-sheets

复制代码

npm install @grapecity/spread-sheets-react

复制代码

然后打开package.json文件，可以看到在dependencies下，增加了两个依赖项。
image.png172452086.png

我们也可以通过手动修改package.json。然后通过命令来下载依赖包，和上面的安装方法是等价的。

npm install

复制代码

目前来看，非常顺利，让我们把引入的SpreadJS用起来，找一个示例参考一下，就看看下面的这个吧。
https://demo.grapecity.com.cn/sp ... nitialization/react
image.png786247253.png

看起来很简单的样子，SpreadJS有自己的component，然后会触发一个initialize的事件，我们可以在这个事件里处理方法里搞事情。
让我们修改一下自己的代码，回到VSC，打开src/app.js。目前的代码如下：
image.png224356993.png

直接把红框内容改成这样

<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
</SpreadSheets>

复制代码

然后加上initSpread方法，官方文档的示例里名字叫initSpread，那我们就不改了，直接给它把方法定义好就行。

const initSpread = (spread) =>{
let sheet1 = spread.getSheet(0);
sheet1.setValue(0, 0, 'Hello World!');
}

复制代码

兴奋心起，来让我们赶紧保存代码，然后npm start一下康康。（旁白：你还没有加import呢，能run起来就见鬼了）。

非常nice，果然run不起来。但问题很简单，就是我们忘记import了。那我们加上，让react知道<SpreadSheets>是什么就行了。
image.png975679016.png