您的位置: 首页 > 技术杂谈 > 正文

如何通过前后端交互的方式制作Excel报表

2024-04-30 11:00 https://my.oschina.net/powertoolsteam/blog/11066135 葡萄城技术团队次阅读条评论

开源中国社区团队直播首秀，以分享为名讲述开源中国社区背后的故事”

前言

Excel拥有在办公领域最广泛的受众群体，以其强大的数据处理和可视化功能，成了无可替代的工具。它不仅可以呈现数据清晰明了，还能进行数据分析、图表制作和数据透视等操作，为用户提供了全面的数据展示和分析能力。

今天小编就为大家介绍一下，如何通过葡萄城公司的纯前端表格控件SpreadJS和后端表格组件GcExcel实现一张Excel报表模板并进行数据的录入与填报。

环境准备

Node.js

SpreadJS在线表格编辑器

代码文件（可作为阅读本文的参考）

前端

设计Excel报表模板

1. 加载制作报表的数据源：

打开SpreadJS在线表格编辑器，在设计分组报表之前，需要数据准备的相关工作，点击表格工具栏上【数据】Tab中的【数据源】按钮，为其添加好数据源。

通过【添加表】按钮添加每一个数据源对象（每一个数据源对象对应一张表），并配置读取数据的路径（路径可以是一个请求对应格式数据源的地址，也可以是一个服务端请求的地址，由服务端返回一个符合格式的数据源对象）。

数据路径为可选字段，如果json中包含多个数据源，可以通过设置数据路径进行区分。

2. 添加报表模板：

添加完数据源之后，点击【插入】Tab的报表按钮，插入一张新的报表模板，之前添加的数据源对象会在左侧的数据源列表中显示，如下图所示。

3. 设置分组报表：

通过拖拽左侧数据源列表中的字段，可以快速构建一个按照销售区域、省市、商品类型字段进行层层分组，统计销售额和利润的报表模板，如下图所示：

4. 保存Excel模板为sjs文件

修改Excel报表模板

将Excel报表模板保存为.sjs文件后，小编现在需要将**Excel报表模板中的部分单元格转换为GcExcel模板语言，**具体操作如下：

把.sjs文件放到SpreadJS前端代码的根目录下

5. 将Excel模板转化为GcExcel模板语法

以Excel报表模板（如下图所示）中的C4单元格（省份）为例，小编先通过getBindingPath方法拿到模板api的信息（下图中的DevTools中的队列信息）

获取到api的信息之后，再解析出它的绑定路径：

//此为部分代码，完整代码在文末的Gitee链接中
let binding = template.getBindingPath(r, c)  // binding内容如上图
// ... 
// 绑定路径
let path = ""
switch (binding && binding.type) {
    case "Group":
    case "List":
        if (binding.binding) {
            let p = binding.binding.match(/(?<=\[)[^\]\[]*(?=\])/g).join(".")
            path += ds + "." + p // path="销售数据.省份"
        }
        break;
    // ...
}

然后再解析出其合并类型和扩展方向：

// Group类型
let group = ""
if (binding && binding.type == "Group") {
    group = "G=M"
} else if (binding && binding.type == "List") {
    group = "G=L"
}
// Expand方向
let expand = ""
if (binding && binding.type != "Summary" && binding.spillDirection == "Vertical") {
   expand = "E=V"
} else if (binding && binding.type != "Summary" && binding.spillDirection == "Horizontal") {
   expand = "E=H"
}

最后将这些信息整合在一起，加上双花括号后，那么导出的Excel文件中的C4单元格的内容应该是如下的GcExcel模板语法：