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

背景

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

现阶段主要面临的问题是项目经理和甲方沟通好了需求,就布置了任务,让研发去调研。但由于现在市面上报表的形式大同小异,大部分都是用 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 报表机制不同于其它报表的设计在于,用户可以直接在设计完成的报表上进行数据修改,报表不再只是一种查看态的形式。比如在做员工打分时,呈现给领导的报表,如果领导觉得某个员工的打分不合适,希望能直接对分数做调整,不再需要回到打分系统中,只要开发人员接入好数据回写接口,即可做到在报表查看态,高权限用户可直接进行数据修改或录入,等于说,一部分填报工作可以直接通过报表能力解决(如下图所示)。

最新技术资源(建议收藏)
https://www.grapecity.com.cn/resources/

总结

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

扩展链接:

【干货放送】财务报表勾稽分析要点,一文读尽!

为什么你的财务报表不出色?推荐你了解这四个设计要点和!

纯前端类 Excel 表格控件在报表勾稽分析领域的应用场景解析

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/877319.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

geotools 读取shape文件

对于GIS开发者而言,矢量数据是我们经常要用到的,而shape数据是矢量数据中最常用的格式,因此解析shape数据也是作为GIS软件开发人员必备的基础技能,而GeoTools无疑是Java最好用来处理GIS数据的三方库,下面例子是简单的g…

算法训练(leetcode)第三十四天 | 56. 携带矿石资源(第八期模拟笔试)、198. 打家劫舍、213. 打家劫舍 II、337. 打家劫舍 III

刷题记录 *56. 携带矿石资源(第八期模拟笔试)198. 打家劫舍213. 打家劫舍 II*337. 打家劫舍 III解法一 (记忆化递推)*解法二 (动态规划) *56. 携带矿石资源(第八期模拟笔试) leetco…

防火墙USG2000USG5000配置nat server 时 no-reverse的含义

防火墙USG2000&USG5000配置nat server 时 no-reverse的含义 https://forum.huawei.com/enterprise/zh/thread/580888066099396608?page2 多次执行带参数no-reverse的nat server命令,可以为该内部服务器配置多个公网地址;未配置参数no-reverse则表…

实现代码灵活性:用Roslyn动态编译和执行存储在数据库中的C#代码

在许多现代应用程序中,动态编译和执行代码是提升灵活性和功能的一种强大技术。本文将介绍如何使用Roslyn编译器平台动态编译和执行存储在数据库中的C#代码,并结合实际公司案例来说明这些技术的应用场景。 1. 引言 在很多应用场景中,我们可能…

牛客周赛53---DEF

D.小红组比赛 题目描述 \,\,\,\,\,\,\,\,\,\,小红希望出一场题目,但是他的实力又不够,所以他想到可以从以前的比赛中各抽一题,来组成一场比赛。不过一场比赛的难度应该是有限制的,所以所以这一场比赛会给一个目标难度分数 target…

docker笔记7-dockerfile

docker笔记7-dockerfile 一、dockerfile介绍二、dockerfile指令三、构建自己的镜像 一、dockerfile介绍 Dockerfile是用来构建Docker镜像的构建文件,是由一系列命令和参数构成的脚本。 以下是常用的 Dockerfile 关键字的完整列表和说明: 二、docker…

Vue3自研开源Tree组件 - Vitepress文档功能演示

基于自己学习的一点Vue3和ts的知识,写的一个企业级的开源Tree组件,给大伙儿演示下组件功能和API的使用,如果您喜欢,不妨点赞和关注下,后续会继续分享源码教程,感谢支持! 演示视频地址&#xff…

【计算机毕业设计】838装修公司CRM系统

🙊作者简介:拥有多年开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板&#xff…

基于微信小程序的高校大学生信息服务平台设计与实现

基于微信小程序的高校大学生信息服务平台设计与实现 Design and Implementation of a College Student Information Service Platform based on WeChat Mini Program 完整下载链接:基于微信小程序的高校大学生信息服务平台设计与实现 文章目录 基于微信小程序的高校大学生信息…

【Python】基础学习技能提升代码样例7:代码测试

1. doctest doctest用于测试 # 文件外命令测试 # file name: foo.py """ My square function. Usage: >>> a my_square(4) >>> b my_square(3) >>> a b 25 """ def my_square(num):return num * num > pytho…

为什么要做边界值测试?

边界值测试的理解 边界值测试(Boundary Value Testing)是一种常用的软件测试方法,它侧重于测试输入值的边缘或临界条件。这些边缘条件通常包括最小值、最大值以及接近这些最小值和最大值的值。边界值测试的基本思想是,许多软件错…

React 学习——Context机制层级组件通信

核心思路:(适用于所有层级,不仅仅是爷孙 父子) createContext方法创建一个上下文对象在顶层组件 通过Provider组件提供数据在底层组件,通过useContext钩子函数使用数据 import { createContext, useContext } from …

R语言 爬取数据+简单清洗

小小练习。见代码注释 # 加载必要的包 library(rvest) library(dplyr) library(tidyr)# 指定网页URL url <- "https://research.un.org/en/unmembers/scmembers"# 读取网页内容 webpage <- read_html(url)# 提取所有表格节点 table_nodes <- html_nodes(web…

vite查漏补缺

一、静态资源处理 //png txt后缀的文件不会检测是否存在&#xff0c;js json vue文件会检测是否存在 import test from "/assets/imgs/test1.png" console.log(test); // /src/assets/imgs/test1.png返回图片的绝对路径// 显式加载资源为一个 URL import test fr…

如何设置SQL Server的端口:详细步骤指南

如何设置SQL Server的端口&#xff1a;详细步骤指南 在SQL Server中&#xff0c;配置端口是确保数据库服务能够正确通信的重要步骤。无论是为了提高安全性还是满足特定的网络配置需求&#xff0c;正确设置SQL Server的端口都是必要的。本文将详细介绍如何设置SQL Server的端口…

深入理解Java中的volatile关键字

深入理解Java中的volatile关键字 1. 引言 在Java多线程编程中,volatile关键字扮演着重要角色。它能够保证变量的可见性和有序性,是实现线程安全的重要工具之一。本文将深入探讨volatile的实现原理,以及与之密切相关的指令重排概念。 2. volatile的作用 volatile关键字主要有…

基于人工智能及大数据的综合智能交通管理平台(可编辑30页PPT)

引言&#xff1a;随着城市化进程的加速和汽车保有量的快速增长&#xff0c;交通拥堵、交通事故频发以及交通资源分配不均等问题日益突出&#xff0c;成为制约城市发展的重要因素。为了应对这些挑战&#xff0c;基于人工智能&#xff08;AI&#xff09;及大数据技术的综合智能交…

【React】详解自定义 Hook

文章目录 一、自定义 Hook 的基本用法1. 什么是自定义 Hook&#xff1f;2. 创建自定义 Hook3. 使用自定义 Hook 二、自定义 Hook 的进阶应用1. 处理副作用2. 组合多个 Hook3. 参数化 Hook4. 条件逻辑 三、自定义 Hook 的实际应用案例1. 实现用户身份验证2. 实现媒体查询 四、最…

民大食堂用餐小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;商家管理&#xff0c;档口号管理&#xff0c;商家餐品管理&#xff0c;餐品种类管理&#xff0c;购物车管理&#xff0c;订单信息管理 微信端账号功能包括&#xff1a;系统首页&a…

学懂C语言(二十六):学会C语言 typedef 关键字的应用

用一句话来说&#xff0c;typedef为已存在的数据类型创建 新的类型 别名。 typedef是C语言中的一个关键字&#xff0c;用于为已存在的数据类型创建新的类型别名。它能提高代码的可读性、可维护性以及便于跨平台移植。以下是typedef关键字在C语言中的几种常见应用&#xff1a; …