首页 > 其他分享 >如何通过前端表格控件实现自动化报表?

如何通过前端表格控件实现自动化报表?

时间:2024-07-30 09:07:44浏览次数:7  
标签:控件 SpreadJS 报表 表格 Excel 数据 市面上

背景

最近伙伴客户的项目经理遇见一个问题,他们在给甲方做自动化报表工具,项目已经基本做好了,但拿给最终甲方,业务人员不太买账,项目经理为此也是天天抓狂,没有想到合适的应对方案。

现阶段主要面临的问题是项目经理和甲方沟通好了需求,就布置了任务,让研发去调研。但由于现在市面上报表的形式大同小异,大部分都是用 Excel 来做,难点就在于要开发一个高度类似 Excel 并且还可以应用在 web 端项目上的报表。市面上存在一些软件级的应用,但是又只能用透视表这些做统计报表分析,和用户期望的聚合形式多少有差异。而且集成费用成本也比较大,导致项目组的人目前都没什么头绪。

解决方法

为了解决这个问题,伙伴客户的项目经理向小编求助,想问问在前端开发过程中,有没有用过一种能同时具备 Excel 使用习惯,也能和业务数据库集成,做出一些业务报表的前端插件。

在寻找解决方案的过程中,小编进行了市场调研,探索了不同的报表生成方式,以确定哪种方式最有可能满足用户的期望需求,这里也做下分享:

方式一:使用 Excel 工具

Excel 可以通过扩展机制,对接一些业务数据。用户可以基于这些业务数据,直接在本地 Excel 利用透视表等方式做出自己想要的报表形式,使用Excel直接做报表存拥有以下优点:

  • 熟悉的界面和操作方式,降低学习成本;
  • 灵活性高,可以根据需要自定义报表样式;
  • 可以在本地进行数据分析和报表生成,无需依赖其他软件或平台。

在目前的市面上,大多数公司都是使用此方法,这也是符合大多数人最好的操作习惯,但从项目的实际落地而言,还是会存在一些难以解决的问题:

  • 目前 Excel 仍然是一个独立的软件,很难和企业的系统进行融合,目前大多数公司都是将数据从系统中导出,然后再用 Excel 打开之后再进行分析并做报表,最后再把报表上传到系统中,同时作为一款独立于系统之外的软件,系统的数据在被导出到系统之外后也非常容易泄露;
  • 目前 Excel 存在多个版本,并且各个版本之间的兼容性也并没有做到一致,就会导致用不同的版本软件打开之后会出现不兼容的问题,同时随着国产办公软件 WPS 的崛起,不兼容的问题未来会更加严重。

总的而言,Excel 作为全球影响范围最广、使用效率最高的软件,目前仍然是中小企业的第一选择,但是随着市面上各大控件产品以及国产办公软件的崛起,越来越多的公司和企业也慢慢开始有了新的选择。

方式二:自研或借助其它报表引擎工具

该方法适合于技术能力较强且公司财力雄厚的企业,针对最终客户的需求,需要采用类似 Excel 报表的设计形式。若考虑自主开发,首要任务是研发一个适用于 Excel 的功能。对开发人员而言,这可能比仅了解 Excel 扩展 API 又要更加困难。尽管市面上存在一些开源的类 Excel 插件,但其功能相对较为简单,且不具备用户所需的报表制作能力。因此,这一途径的实现成本相当高昂。

另一种方法是借助其他报表引擎工具,这类工具通常具备完善的数据接入能力,通过表单布局形式,同样可以生成用户所需的 Excel 报表。若最终客户仅需查看类似 Excel 的报表形式,或者预算中包含相应的实施及维护费用,那么这些工具具有极高的应用价值。毕竟,对于任何公司而言,能够轻松创收而又耗费少量精力的事情,几乎没有谁会拒绝。然而,若客户需要根据业务需求自行制作报表,则学习新系统的成本仍然无法回避。

方式三:使用市面上高度类似 Excel 的前端表格控件工具

小编在进行市面上的调研时发现,除了直接用 Excel 和自研之外,其实还有一款非常成熟的前端类 Excel 表格控件 SpreadJS,该产品由西安葡萄城研发,整体上使用起来和Excel非常相似,同时口碑也相当不错。

SpreadJS 可以兼容 Excel 绝大部分基础能力,包含了透视表及公式函数,甚至包含了基于数据透视表和图表的相关统计分析。这就意味着,研发只需要负责开发数据接入接口,业务人员完全可以用以前线下使用 Excel 的方式制作自己想要的报表。

除此之外,SpreadJS 也具备了和主流报表引擎同等的报表制作能力,区别是在报表制作形式上,SpreadJS并没有选择市面上常用的表单配置型模式,而是选择了类 Excel 的报表设计形式,有效减少用户的学习成本。

上面的动图是 SpreadJS 报表模块的操作过程,研发做好数据接入后,业务人员只需要通过拖拉拽相应的字段到单元格位置即可。之后的单元格背景色、文字大小、行高列宽等一系列显示设置,都可以完全复用类Excel的使用习惯。目前在市面上,这种设计形式可以算是独一无二了。

SpreadJS 报表机制不同于其它报表的设计在于,用户可以直接在设计完成的报表上进行数据修改,报表不再只是一种查看态的形式。比如在做员工打分时,呈现给领导的报表,如果领导觉得某个员工的打分不合适,希望能直接对分数做调整,不再需要回到打分系统中,只要开发人员接入好数据回写接口,即可做到在报表查看态,高权限用户可直接进行数据修改或录入,等于说,一部分填报工作可以直接通过报表能力解决(如下图所示)。

总结

综合来看,以上三种解决方法各有利弊。对于对数据安全性要求较低、业务需求相对简单的公司,可以选择方法一;对于技术实力较强的公司和企业,可以考虑方法二;而对于技术能力相对较弱,但需要进行大量数据填报、分析以及保护数据安全,并对 Excel 有强烈依赖的公司,可以考虑方法三,以便更好地满足用户需求。

标签:控件,SpreadJS,报表,表格,Excel,数据,市面上
From: https://www.cnblogs.com/powertoolsteam/p/18331506

相关文章

  • element el-table 表格加载图标替换
    //element表格<el-tablev-loading="loading"/>//表格加载页面.el-loading-mask{background-color:rgba(0,0,0,.6);}//表格默认加载图标隐藏.el-table.el-loading-spinner.circular{display:none!important;//隐藏默认样式}......
  • Android 四大控件
    一、Activity  在Android应用中,Activity是一个非常核心的组件,用于表示应用的一个单一屏幕,是用户与应用交互的主界面。每个Activity提供一个窗口,用于绘制界面和接收与用户的交互事件。理解Activity的创建、生命周期和其基本用法对于开发Android应用至关重要。 一个......
  • 报表控件DevExpress Reporting v24.1 - 全新升级报表查看器功能
    DevExpressReporting是.NETFramework下功能完善的报表平台,它附带了易于使用的VisualStudio报表设计器和丰富的报表控件集,包括数据透视表、图表,因此您可以构建无与伦比、信息清晰的报表。DevExpressReporting控件日前正式发布了v24.1,新版本重点针对报表查看器的一系列功能进行......
  • 利用表格进行生活化减脂方案
    身高体重BMI身材评估179cm83kg25.9偏重未来一段时间身材管理计划:减脂将BMI降低至23~24的范围内,进行后续的增肌计划增肌减脂方案目前使用晚饭前训练的分餐版本excel表格来当作减脂方案。故晚饭作为全天最大一顿练后餐。其余餐为:①早饭、②午饭=其他餐、......
  • 《最新出炉》系列入门篇-Python+Playwright自动化测试-55- 上传文件 (非input控件)- 中
    1.简介在实际工作中,我们进行web自动化的时候,文件上传是很常见的操作,例如上传用户头像,上传身份证信息等。所以宏哥打算按上传文件的分类对其进行一下讲解和分享。2.上传文件的API(非input控件)Playwright是一个现代化的自动化测试工具,它支持多种浏览器和操作系统,可以帮助开发人员......
  • JavaScript 运算符表格
    JavaScript算数运算符算数运算符用于对数字执行算数运算:运算符描述+加法-减法*乘法/除法%取模(余数)++递加--递减JavaScript赋值运算符赋值运算符向JavaScript变量赋值。运算符例子等同于=x=yx=y+=x+=yx=x+......
  • Team center表格开发样例 --转自PLMCode
    第一步:分别在自己的模块下的html、viewmodel、js文件夹下,加入下列三个文件simpleTableTestPageTableView.html、simpleTableTestPageTableViewModel.json、simpleTableTestPageService.js第二步:simpleTableTestPageTableView.html<aw-splm-tablegridid="exampleTable"></aw-spl......
  • Android笔试面试题AI答之控件Views(6)
    答案来着文心一言,仅供参考目录1.简述什么是RemoteViews?使用场景有哪些?RemoteViews的特性使用场景总结2.获取View宽高的几种方法?1.在`onWindowFocusChanged`方法中获取2.使用`ViewTreeObserver.OnGlobalLayoutListener`3.使用`ViewTreeObserver.OnPreDrawListene......
  • 274java jsp SSM办公自动化管理系统员工档案员工考勤员工请假员工销假工作内容工作报
     项目技术:SSM+Maven+Vue等等组成,B/S模式+Maven管理等等。环境需要1.运行环境:最好是javajdk1.8,我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat环境:Tomcat7.x,8.x,9.x版本均可4.硬件环境:windows7/8/1......
  • Qt自定义控件
    开发系统:ubuntu22.04IDE:clion构建工具:cmakeQt自定义控件之插件形式插件形式是指将自定义控件按照一定的规则,生成动态库,放到Qtdesigner插件加载目录/usr/lib/x86_64-linux-gnu/qt5/plugins/designer下,Qtdesigner启动时加载,自定义控件就像内置控件一样可以直接拖拽。下面......