如何用设计器的方式制作GcExcel模板？
本帖最后由 xcymoo 于 2024-5-11 12:04 编辑背景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的内容应该是：
{{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函数即可。
页:
[1]