请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

xcymoo
超级版主   /  发表于:2024-5-11 12:03  /   查看:94  /  回复:0
本帖最后由 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. 都支持汇总公式

image.png367473143.png
SpreadJS ReportSheet的设计器页面

image.png254750670.png
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附件中自行查看,这里只举一个例子:
image.png351792907.png

比如我想要将C4单元格解析为GcExcel能识别的模板,那么C4的内容应该是:
  1. {{ds.销售数据.省份(E=V,G=M,C=B4)}}
复制代码
既然我们已经可以通过getBindingPath的api拿到这些信息,那么将其做个转换也是顺理成章的事情。



最终效果
我们最终将模板导出为Excel文件后,看到的效果是这样的:
image.png363303832.png
利用工具生成的GcExcel模板文件

这是一个可以直接在GcExcel中使用的模板,那么当前用GcExcel处理这个模板的效果如何呢?
image.png867850952.png
使用上面模板用GcExcel生成的报表

需要注意的是,demo中只对分组、列表、静态单元格、扩展方向以及部分公式做了适配,如果读者有其他的需求,可以在demo的基础上进行修改。
例如在上图中,GcExcel最终生成的报表效果和SpreadJS中预览的相差无几,只是排序有一些不同,这是因为SpreadJS默认不对数据做排序,是按照数据原本的顺序排列,而GcExcel则默认升序,如果希望二者的表现相同,则需要对SpreadJS设计的模板中 未设置排序的字段增加Sort=None属性(缩写为S=N,详见此处)。

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


Spjs2Gc.zip

49.87 KB, 下载次数: 4

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部