SpreadJS 全家桶实践 - 在线Excel报表系统（一）

收藏

本帖最后由 dexteryao 于 2020-8-31 12:14 编辑

SpreadJS组件化（新）表格编辑器开发接近尾声，已经有部分受邀客户拿到了预览版，具体使用可参考组件化（新）表格编辑器预览版常见问题集合贴。
接下来，通过示例介绍使用SpreadJS组件化表格编辑器和GCExcel（服务端表格组件）快速构建一个简单报表系统。
整个系统将实现如下功能
1. 在线Excel报表设计。快速集成SpreadJS编辑器，实现纯前端在线Excel功能
image.png286806029.png

2. 自定义编辑器工具栏，实现模板文件上传加载。加载文件直接表格中展示，点击加载
image.png867850952.png

3. 通过GCExcel模板功能，绑定数据生成报表。前端设计模板，服务端绑定数据返回前端展示。实时切换预览
image.png212966918.png

4. 导出PDF。可导出所有sheet页或当前Sheet
image.png695005798.png

运行环境
1. SpreadJS V13
2. 组件化设计器预览版
3. GCExcel 3.2
4. Spring Boot 2.3.2

整个系统实践分为三期，本期将搭建项目集成SpreadJS系列组件
1. 项目搭建，同时使用IntelliJ IDEA的Spring Assistant 组件新建Spring Boot Web项目。
根据提示，选择web项目下一步即可。
image.png877669982.png

在resources/application.propertyies中配置
项目端口号8088
上传不限制文件大小

server.port=8088

复制代码

2. 添加MVC
pom.xml中添加 thymeleaf 模板引擎

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

复制代码

resources中添加index.html模板
添加IndexController
image.png245415038.png

@Controller
@RequestMapping({"/", "Home"})
public class IndexController {
@RequestMapping("/")
public String index(Model model) {
return "index";
}
}

复制代码

3. 集成SpreadJS 组件化编辑器
将spreadJS资源和组件化设计器资源放入static文件夹中，在index.html 页面引入

<link href="lib/spreadjs/css/gc.spread.sheets.excel2016colorful.13.2.0.css" rel="stylesheet" type="text/css"/>
<link href="lib/spreadjs/designer/css/gc.spread.sheets.designer.0.0.0.min.css" rel="stylesheet" type="text/css"/>

复制代码

引入所有JS资源，现引入SpreadJS资源，包括ExcelIO和plugsin中资源

<script src="lib/spreadjs/scripts/gc.spread.sheets.all.13.2.0.min.js" type="text/javascript"></script>
<script src="lib/spreadjs/scripts/interop/gc.spread.excelio.13.2.0.min.js" type="text/javascript"></script>
<script src="lib/spreadjs/scripts/plugins/gc.spread.sheets.print.13.2.0.min.js" type="text/javascript"></script>
<script src="lib/spreadjs/scripts/plugins/gc.spread.sheets.pdf.13.2.0.min.js" type="text/javascript"></script>
<script src="lib/spreadjs/scripts/plugins/gc.spread.sheets.charts.13.2.0.min.js" type="text/javascript"></script>
<script src="lib/spreadjs/scripts/plugins/gc.spread.sheets.shapes.13.2.0.min.js" type="text/javascript"></script>

复制代码

index页面中添加ssDesigner，作为编辑器Host，

<body>
<section><h1>Welcome to SpreadJS World!</h1></section>
<section class="designerContainer">
<aside class="designerAside">
<div style="width:180px">Aside</div>
</aside>
<main class="designerMain">
<div id="ssDesigner" class="designerHost"></div>
<input type="file" id="ribbon_file_selector" name="file" style="display:none"/>
</main>
</section>
</body>

复制代码

自定义页面style.css

<link href="style.css" rel="stylesheet" type="text/css"/>

复制代码

html, body{
height: 100%;
margin: 0;
}
h1 {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-block-start: 0;
padding: 15px;
}
.designerContainer{
width: CALC(100% - 20px);
height: CALC(100% - 120px);
padding: 10px;
display: flex;
}
.designerAside{
width: 180px;
height: 100%;
text-align: center;
background: gold;
}
.designerMain{
height: 100%;
flex: 0 100%;
padding: 0 0 0 10px;
}
.designerHost{
width: 100%;
height: 100%;
}

复制代码

新建static中index.js 设置中文环境并，初始化编辑器

var designer
window.onload = function () {
GC.Spread.Common.CultureManager.culture("zh-cn");
designer = <blockquote>designer = new GC.Spread.Sheets.Designer.Designer(

复制代码

运行项目，进入http://localhost:8088/ 体验在线Excel

Huiju2017 · Huiju2017

使用SpreadJS和GCExcel构建在线Excel报表系统，有样例源码压缩包，可以下载吗？

Derrick.Jiao · Derrick.Jiao

Huiju2017 发表于 2021-5-24 11:43
使用SpreadJS和GCExcel构建在线Excel报表系统，有样例源码压缩包，可以下载吗？

您可以参考这个demo

Huiju2017 · Huiju2017

Derrick.Jiao 发表于 2021-5-24 11:47
您可以参考这个demo

多谢。
这个demo是从github上获取的吗？
有github的链接吗？

Derrick.Jiao · Derrick.Jiao

Huiju2017 发表于 2021-6-4 10:25
多谢。
这个demo是从github上获取的吗？
有github的链接吗？

不用客气，这个demo的git地址是内部的，没有对外公开。

Huiju2017 · Huiju2017

Derrick.Jiao 发表于 2021-6-4 10:29
不用客气，这个demo的git地址是内部的，没有对外公开。

好的，多谢指教。
这个demo能单独用tomcat启动运行查看效果吗？
是否是只给我代码用于参考，不能独立运行查看效果？
这个demo中，只有【src】和【pom.xml】对我有用，对吧？
这个demo用的是idea哪个版本开发的？
没有【spreadjsworld.iml】文件，是压缩前删掉了吗？
其中，【mvnw.cmd】和【mvnw】是和maven相关，对吧？不需要我执行吧？

Derrick.Jiao · Derrick.Jiao

Huiju2017 发表于 2021-6-4 12:00
好的，多谢指教。
这个demo能单独用tomcat启动运行查看效果吗？
是否是只给我代码用于参考，不能独立运 ...

参考下面的配置，运行项目，然后访问控制台的端口就可以了。
image.png93899840.png

Huiju2017 · Huiju2017

Derrick.Jiao 发表于 2021-6-4 12:07
参考下面的配置，运行项目，然后访问控制台的端口就可以了。

我看pom.xml文件中指定的是java版本11，是必须用这个版本的jdk编译吗？
我本机的jdk1.8和jdk1.7可以用于编译这个demo吗？

Derrick.Jiao · Derrick.Jiao

Huiju2017 发表于 2021-6-4 16:47
我看pom.xml文件中指定的是java版本11，是必须用这个版本的jdk编译吗？
我本机的jdk1.8和jdk1.7可以用于 ...

这个版本没有影响，建议使用1.8。

Huiju2017 · Huiju2017

Derrick.Jiao 发表于 2021-6-4 16:48
这个版本没有影响，建议使用1.8。

我改成jdk1.8后，编译显示异常，是否是demo中的某些代码，只能适用于jdk11，才导致出问题的?

		自动登录	找回密码
密码			立即注册

SpreadJS 全家桶实践 - 在线Excel报表系统（一）

10 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章

GrapeCity