Svelte 框架结合 SpreadJS 实现纯前端类 Excel 在线报表设计

发布时间：2022/12/26 09:12 发布者：KevinChen

在上篇文章中介绍了，如何在Svelte框架中使用SpreadJS完成填报功能。这次我们来看看，如何实现类Excel报表设计吧。首先看下在svelte框架中如何引入Designer组件。

2、接着我们在lib文件夹下创建Designer.svelte，在此文件中创建Designer的目标DOM元素：

3、接着为此容器设置宽高,以及引入css资源

5、最后在omMount生命周期钩子函数中，初始化Designer容器，并设置数据，添加图表

6、完成Designer.svelte文件的编辑后，在app.svelte文件中进行引入。最后实现效果如下：

从上图中可以看出，设计器Designer组件包括功能区、公式栏、状态栏、侧面板和上下文菜单。通过这些功能，可在线/离线设计报表模板、编辑、计算、分析数据并与数据库绑定，满足填报系统开发需求。

介绍完在svelte框架中初始化designer组件及创建图表相关功能后，接下来介绍下什么是类Excel报表设计以及如何实现在svelte框架实现类Excel在线报表设计。

使用类 Excel 模式设计各类报表，既可以保留用户的使用习惯，又可以轻松实现数据从本地到线上的平滑迁移。通过嵌入 SpreadJS 纯前端表格控件，企业可迅速搭建出一系列符合 Excel 使用习惯、功能布局高度类似 Excel 、可直接读写 Excel 文档的信息系统，充分满足企业各类复杂报表的设计需求，进一步提高企业数据管理效率。

下文通过在Designer中设计模板，绑定字段，绑定数据，导出excel等功能为例来介绍如何在线报表设计。

1、设计模板

通过菜单栏标题进行设计：对A1到E3区域单元格合并，并设置居中，设置字体为楷体18号；设置页眉字体为11号字体。同时Designer组件还支持表单设计，如复选框，单选框，下拉框，日期选择等。

结果如下图所示：

2、绑定字段

设计模板后，就可以进行绑定字段了。在”数据“页签中，选择工作表绑定，出现字段列表这个侧边栏，然后右键，然后鼠标悬浮在Source根字段附件，出现“+”图标，此时点击“+”,新增字段或者table，最后设计的字段列表如下图所示：

设计字段列表后，可以通过拖拽方式放入指定位置：

如下图所示：

至此建议模板及字段绑定工作就完成了。

3、数据绑定

数据绑定有两种方式：

第一种是将当前设计好的模板与字段列表保存为json文件，在后端 GcExcel中进行解析，并且填充数据。

第二种方在前端调用一个http请求，获取返回数据后，进行setDataSource()操作。

此两种方式都需要在菜单栏中添加一个按钮，让用户可以点击操作

下面先介绍下如何自定义菜单栏。介绍之后再分别介绍下如何实现这两种数据绑定。

var config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))
config.commandMap = {
BindData: {
title: "BindData data to server",
text: "数据绑定",
iconClass: "ribbon-button-welcome",
bigButton: "true",
commandName: "BindData",
execute: async (context, propertyName, fontItalicChecked) => {},
},
"Save": {
iconClass: "ribbon-button-download",
text: "保存",
commandName: "save",
execute: async function (context, propertyName) {},
}
};
config.ribbon[0].buttonGroups[0] = {
thumbnailClass: "save",
commandGroup: {
children: [
{
direction: "vertical",
commands: ["BindData","Save"],
}
],
},
};
designer.setConfig(config)

通过上述代码就可以实现在菜单栏实现两个简易按钮。

实现按钮之后，可以重写execute方法。

上面讲到的第一种方法是将当前Spread与字段列表合并为同一个json ,然后发送给后端，GcExcel接收json数据，

前端代码为：

execute: async (context, propertyName, fontItalicChecked) => {
let spread = context.Spread;
let formData = new FormData();
let json = spread.toJSON({
includeBindingSource: true
})

var designerBindingPathSchema = designer.getData("treeNodeFromJson") || designer.getData("updatedTreeNode") || designer.getData("oldTreeNodeFromJson");
json.schema = designerBindingPathSchema
formData.append('json',JSON.stringify(json))
$.ajax({
type: "post",
url: "http://localhost:8080/excel",
data: formData,
processData: false, //必须
contentType: false, //必须
success: function (data) {
console.log(data)
spread.fromJSON(JSON.parse(data))
},
error: function () {
alert("请求失败");
}
});
},

后端代码为：

@PostMapping (value = "/excel")
@CrossOrigin
public String greeting(@RequestParam(name="json") String json, Model model) {

Workbook workbook = new Workbook();
System.out.print(json.toString());
workbook.fromJson(json);
StationInfo stationInfo = new StationInfo();
stationInfo.name = "实验站";
stationInfo.date = String.valueOf(new Date());
stationInfo.rainFalls = new ArrayList<RainFall>();

RainFall rainFall = new RainFall();
rainFall.time = "03:12";
rainFall.precipitation = "21.23";
rainFall.rain = "0.23";
rainFall.record_person = "李四";
rainFall.remark = "";
stationInfo.rainFalls.add(rainFall);
IWorksheet worksheet = workbook.getWorksheets().get(0);
worksheet.setDataSource(stationInfo);

workbook.save("json/test.pdf");
workbook.save("json/test.xlsx");
String jsonWithOption = workbook.toJson();

return jsonWithOption;
}

后端将处理号的json返回给前端，前端fromJSON就可以看到相关数据啦。

接下来介绍下第二种方式，第二种方式较为简单，第一种方式适用于大数据量及大量公式的场景，在后端处理数据可以大大提升性能。第二种方法在前端发送一个http请求，接收后端返回的数据，然后setDataSource()即可。

4、导入导出

最后介绍下designer的导入导出功能，designer支持导入ssjson文件、excel文件、csv文件；支持导出ssjson文件、excel文件、csv文件、pdf文件。满足各种导入导出场景。

以上就是使用Svelte框架结合SpreadJS实现纯前端类Excel在线报表设计的全部内容啦，其实关于在线报表设计还有超级多的功能等待大家去发现，快来体验一下吧。

SpreadJS | 下载试用
纯前端表格控件SpreadJS，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金等行业龙头企业的青睐，并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能，满足表格文档协同编辑、数据填报、类 Excel 报表设计等业务场景需求，极大的降低企业研发成本和项目交付风险。
如下资源列表，可以为您评估产品提供帮助：
预约技术顾问，享受 30 天免费金牌服务
申请临时部署授权，用于内部测试
了解 SpreadJS 在线表格编辑器