WEB财务报表设计器的实现_web报表设计文档-CSDN博客

本文链接：https://blog.csdn.net/wh_xia_jun/article/details/119793794

本文介绍了如何使用React构建自定义财务报表模板，包括数据源定义、报表格式设计、参数传递和查看功能。系统支持Excel类似的公式计算，并允许用户进行行列合并、单元格对齐等操作。虽然部分功能如冻结表头、打印和导出等功能尚未实现，但已具备基本的报表生成和查看能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整体思路为：

自定义报表模板（参见用react 构建电子表格相关文档）
选择模板，填写必要信息，生成相关报表
查询报表

自定义财务数据数据源

由于报表系统和财务数据库是分开部署的，报表系统必须了解财务数据库相关信息，因此，需要定义财务数据源信息，且财务数据源名称固定为“csReport”

自定义web财务报表格式（略）

根据需要增加报表模板

报表模板设计器如下：

报表格式设计器目前支持如下设置：

设置字体
追加、插入、删除表格行列
合并、拆分单元格
设置单元格内容对齐方式
设置表格线

支持类Excel表内取数公式（有一些第三方开源库）

填写新增加报表信息

查看报表

查看报表分为三种类型：1、创建的时候 2、报表实例查看 3、设计模板测试的时候查看

参数传递:目前定义了多达11个参数，主要是模板id、报表本身需要的信息等

接受参数：

let _report_id=this.props.match.params.id;
let _accountSetId=this.props.match.params.accountSetId;
let _year=this.props.match.params.year;
let _month=this.props.match.params.month;

设计之初，考虑到一个worktable 可以有有个sheet页面，一个sheet 有多个table，所以参数传递的顺序为；worktable->worksheet->worktable

公式向导后期再完善

冻结表头（延后）

打印（延后）

导出（延后）

表内公式升级（延后）