如何用设计器的方式制作GcExcel模板？

背景

GcExcel很早就支持了通过模板语法生成报表的功能，具体的使用案例请点击这里查看，这里不做对其使用方法做介绍。

而很多用户在使用模板语法的过程中，发现其中存在一些不方便的地方，比如：

1. Excel原生不支持模板语法，需要用户手动填写，非常容易出现错误；

2. 当你指定了某个单元格为上下文（比如Context=D5）后，如果在D5的左上方增删了行列，其上下文并不会随之变化，需要用户手动再改过来，否则会导致上下文关系错误。如果增删发生在模板制作的后期，修改的工作就更加费时费力；

3. 无法实时看到修改的结果，从修改完成到看到效果要1分钟，对于不熟悉模板语法的用户效率极低；

如果你制作过GcExcel模板，以上几个问题，相信你都遇到过。而这篇文章，就可以帮你解决这些痛点。

解决方案

SpreadJS在刚刚发布的V17版本，新增了报表reportSheet的功能，而这个功能其实和GcExcel的模板有着很多的共同点：

1. 都有上下文（Context）的概念

2. 都有横向和纵向两个扩展方向（Expand）

3. 都有群组类型（Group）

4. 都支持汇总公式

SpreadJS ReportSheet的设计器页面

ReportSheet预览页

丨如何用reportSheet制作模板，这里不做赘述，详情请查看公开课

区别在于SpreadJS自带设计器，上面提到的在制作GcExcel模板过程中遇到的问题，在SpreadJS中都不复存在，所以我们完全可以用SpreadJS的设计器制作GcExcel的模板，那么 核心问题就是：

SpreadJS中做好的报表模板，如何转换为GcExcel能识别的Excel文件？

如果你了解SpreadJS，那你应该知道它可以直接导出Excel，但SpreadJS的报表页导出为Excel后并不能直接使用，所以我们的思路是：用SpreadJS提供的api解析我们在设计器中制作的模板。

一个制作好的SpreadJS报表模板，包含以下信息：

1. 样式信息：包括行列的宽高，文字的字号、颜色、加粗等信息，单元格合并状态、对齐状态等

2. 数据信息：单元格内部的文字来是静态字段还是绑定了数据源

3. 上下文关系：即绑定了数据源的单元格在自动扩展时，以哪个单元格为基准

4. 扩展方向：单元格扩展的方向

5. 汇总信息：即公式单元格或者汇总类型的单元格

6. ……其他信息

这里我只列出了我考虑到的点，其实SpreadJS的报表中，有很多属性并不能和GcExcel模板一一对应，比如分栏、填报；还有一些属性可以对应，但我没有列出来，比如分页、过滤、排序，这些可以留给读者自己思考。

思路整理到这里，要做的事情其实就很清楚了，那就是用SpreadJS提供的api将上述信息解析出来，具体实现的方法我不做过多介绍，都是一些工程性的问题，读者可以在demo附件中自行查看，这里只举一个例子：

比如我想要将C4单元格解析为GcExcel能识别的模板，那么C4的内容应该是：

1. {{ds.销售数据.省份(E=V,G=M,C=B4)}}

复制代码

既然我们已经可以通过getBindingPath的api拿到这些信息，那么将其做个转换也是顺理成章的事情。

最终效果

我们最终将模板导出为Excel文件后，看到的效果是这样的：

利用工具生成的GcExcel模板文件

这是一个可以直接在GcExcel中使用的模板，那么当前用GcExcel处理这个模板的效果如何呢？

使用上面模板用GcExcel生成的报表

需要注意的是，demo中只对分组、列表、静态单元格、扩展方向以及部分公式做了适配，如果读者有其他的需求，可以在demo的基础上进行修改。

例如在上图中，GcExcel最终生成的报表效果和SpreadJS中预览的相差无几，只是排序有一些不同，这是因为SpreadJS默认不对数据做排序，是按照数据原本的顺序排列，而GcExcel则默认升序，如果希望二者的表现相同，则需要对SpreadJS设计的模板中 未设置排序的字段增加Sort=None属性（缩写为S=N，详见此处）。

结语

以上就是如何利用SpreadJS设计器来设计GcExcel模板的一些思路，文章最后有demo附件，欢迎大家下载试用，试用时，运行spreadjs后，点击导出按钮，然后将下载的文件保存到gcexcel文件夹根目录，最后运行gcexcel目录下的main函数即可。