A. 如何在web中实现类似excel的表格控件
你说的是纯前端具有类似Excel操作的表格控件吧？根据你的需求来分析，SpreadJS应该比较符合你的需求，这个控件可嵌入系统并实现在线Excel的功能。
详细的信息，可以参考下面的描述
http://www.gcpowertools.com.cn/procts/spreadjs/
B. 求推荐现在有什么好用的web报表工具
思迈特软件Smartbi的报表工具就挺好用的，思迈特软件Smartbi在大数据审计分析中的应用重点包括跨库查询、高性能存储、疑点生成、自助分析、数据报送、财务分析、专题分析、自动取证单、大屏报送等。思迈特软件Smartbi是一款基于轻量级Web报表工具，采用拖拽式设计模式，不需任何服务器和组件支持，即可在 Mac、Linux 和 Windows 操作系统中，设计多种类型的报表。思迈特软件Smartbi在Web平台的扩展，不但继承了其强大的报表设计能力和高效的报表开发引擎，还提供了全新的跨平台报表设计器和纯前端报表查看器，全面支持 Node.js、Angular、React、Vue 等前端开发框架。
Smartbi从报表开发的数据准备、样式设计、数据计算、数据可视化、互动逻辑、共享发布六大步骤上都有特色的功能，充分利用了Excel的现有能力，堪称企业报表平台的解决方案专家。尤其集成了Excel和ECharts后，使得Smartbi Insight具有丰富的展现力、强大的互动性（基于单元格和对象的数据模型）、超级灵活的布局能力，而且这些都可以在Excel界面上全部完成。
集群：提高系统性能和可靠性
高一致性：所有通过Smartbi产品进行的配置和文件都可以随时同步到集群的各个节点。
高可用性：支持所有单机功能。单一节点宕机后，系统仍可正常访问。
强扩展性：基于良好的架构设计，随着节点的增加，系统所支持的并发几乎呈线性增长，且每个节点的负载更加均衡。
使用简单：可在平台中通过简单的操作快速配置集群环境，其中节点的增删支持热部署。此外，还可在平台中监控各个节点的运行情况和日志。
自成立初期，思迈特软件Smartbi就一直坚持国产自主研发道路，先后获得软着数十项；同时与华为、深信服、新华三、达梦、麒麟软件、人大金仓等合作伙伴通力合作，共同打造产品销售、产品整合、产品应用的国产化可信生态体系，与上下游厂商、专业实施伙伴和销售渠道伙伴共同为最终用户服务。
报表工具靠不靠谱，来试试Smartbi,思迈特软件Smartbi经过多年持续自主研发，凝聚大量商业智能最佳实践经验，整合了各行业的数据分析和决策支持的功能需求。满足最终用户在企业级报表、数据可视化分析、自助探索分析、数据挖掘建模、AI智能分析等大数据分析需求。
思迈特软件Smartbi个人用户全功能模块长期免费试用
马上免费体验:Smartbi一站式大数据分析平台
C. 如何在web中实现类似excel的表格控件
SpreadJS 可以使用 Excel ExcelIO 服务来和Excel文件交互。ExcelIO服务需要部署到服务端,通过 ExcelIO 服务你可以导入 Spread 文件后你可以和表单中的数据交互
D. 什么是Office Web 组件
利用Internet Explorer浏览器，用户可以充分利用交互页面的效果。当用户使用Internet Explorer浏览器去浏览一个含有Office Web 组件的页面时，用户能够在Web页面上交互的进行各种操作，比如：数据分类、过滤、输入数据、定义公式计算，扩展或折叠数据内容等。Com控件能够提供交互操作。并且是可以通过编程，制作实用的、交互的、基于Web的解决方案。Office Web 组件含有四个组件。Office 电子表格组件、Office 数据透视表组件、Office 数据源组件、Office图表组件。Office 电子表格组件：Office 电子表格组件提供一个重计算的引擎，一个全功能的库和一个显示在Web页面的电子表格界面。通过页面内的控件或其它的URL地址内的Internet Explorer 文档对象模型，用户可以进行多种计算。只要保存Excel文件作为Web页面，并选择交互页面，用户就可以制作交互页面。Office 数据透可以使用电子表格输入和计算数据。电子表格由单元格的列和行组成。可以直接在电子表格的单元格中输入数据，并使用公式对这些数据进行计算。如果使用某个 Microsoft Office 2000 设计程序创建了交互式的电子表格，并将该电子表格放置到 Web 页之上，则 Web 用户就有可能直接在浏览器中与数据进行交互和计算。用户可以对数据进行更改，并自动看到计算的结果。视表组件：Office 数据透视表组件使用户能够通过分类、组合、过滤、纵览或数据透视来分析数据。数据可以从一个数据透视表、或从一个数据库（如Microsoft Access或Microsoft SQL Server）或从任何支持OLEDB(如Microsoft Decision Support Server)。当用户将一个含有数据透视表或者动态查询表的工作表保存为交互式主页时。用户就可以通过Internet页面来访问动态的数据透视表组件。Office 数据源组件：数据源组件是工作于数据访问页面和数据透视表后的报告引擎。数据源组件用来管理后端数据库和决定页面上显示那条纪录。
E. 关于Web表单设计的经验分享
表单在UI设计中的出现场景还是比较多的，尤其是在一些To B的产品设计中。最近自己有做大量web 表单设计，就想把自己学到的一些关于表单设计的知识点分享给大家～
一、什么是表单？
表单在网页中的主要功能是负责采集数据以及向服务器传送数据的。表单是采集用户信息数据重要的途径。好的表单设计能提升信息采集的效率与成功率。不好的表单设计会影响用户心情，体验差，导致信息采集不成功甚至带来利益的损失。
二、表单的构成
表单通常由标签、输入域、操作按钮、这三部分构成。
标签
标签我们可以把它理解为标题，告诉用户该表单需要填写什么信息、该表单需要采集什么内容。标签通常出现在输入域的左边、顶部、或者输入域内。
标签按所填信息的必要性分为必填项和非必填项，一般我们会在必填项的标签内容加上＊号。＊号的的摆放位置有下面两种情况：
1.当标签与输入域居中对齐时，建议把＊号放在标签左侧。
因为＊号比较显目，用户往往第一眼会先看到它，然后按照用户从左往右的阅读习惯，视觉落点分别为文字标签、输入域。考虑到表单的填写效率，＊号位于左侧的表单阅读起来会更加顺畅。所以当标签与输入域居中对齐时，把＊号放在标签左侧会更好。
2.当标签与输入域左对齐时，建议把＊号放在标签右侧。
由于人们纵向的阅读习惯，视线会成F型。＊号在左侧还是在右侧并不会对用户视觉落脚点造成太多困扰，另外考虑到对齐的形式，＊号放在标签右侧会更好。
输入域
输入域是录入用户各种类型信息的重要交互区域。输入域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等等。
不知道这些输入域的区别的小伙伴可以去ant design官网学习一下，传送门：
https://ant.design/components/overview-cn/
因为输入域是录入信息很重要的交互区域，在设计时我们应该考虑用户输入的多种场景去设计。我们可以将用户的输入过程分为输入前、输入中、输入后。根据每一种场景中细化我们的设计。比如在输入中：我们要考虑光标的设计、输入文字信息的设计，信息提示等，在输入后：我们要考虑信息输入错误应该给予怎样的视觉反馈等。总之考虑得越细致，越能提高信息录入的成功率。
操作按钮
操作按钮是在用户填写完表单各项内容后，所要进行的操作动作，来完成或者结束当前操作流程。操作按钮分为全局操作按钮与局部操作按钮。全局操作按钮控制整个表单，比如提交、发送等操作按钮。局部操作按钮是对某一范围的内容起作用，比如编辑、删除操作。
三、表单设计常见问题
1.标签采用哪种对齐方式更好？
在我们的实际项目中，通常会因为文案的长短不一，导致我们不知道该采用哪种对齐方式。标签的处理原则就是要要尽量对齐，采用哪种对齐方式应考虑具体的制约因素和目标来定。
左对齐
当标签采用左对齐的方式的时，因为文字标签的长度不统一，导致标签与输入框的间距是不可控的。这就会造成设计的通用性不强，以及横向空间的浪费。
如果采用左对齐的形式，就要尽量去保持文字标签的长度一致，比如通过字距的调整让文字标签的长度保持一致或者通过留足留白空间，这样设计上会更统一。以为例，采取左对齐形式，但是它留足了文字标签与输入域之间的距离，让表单看上去更统一和谐，不足的就是造成了部分空间的浪费。
顶对齐
采用顶对齐的形式，会让标签和输入域垂直显示，纵向布局的信息呈现效果会更好，从而提高用户填写的效率。顶对齐因为垂直排布，会造成纵向空间的浪费，但在横空间上比较节省，比较适用于横向宽度较窄的页面。
▵顶对齐
右对齐
右对齐跟左对齐一样会因为标签长度不可控。导致设计的通用性不强，以及横向空间的浪费，但节约了纵向空间。
▵右对齐
在这几种对齐方式中，用户浏览信息的速率顶对齐>右对齐>左对齐。顶对齐形式适合简易表单、右对齐与左对齐表单适合复杂表单。
2.操作按钮应该用哪种设计形式比较好？
对于全局的操作按钮会用常规的按钮样式，全局按钮分为主按钮与次按钮。
主按钮
主按钮是界面中比较重要的功能操作按钮，比如提交、保存等一些正向的操作。主按钮在视觉层级上最高，能够引导用户很快的找到核心的操作并点击。主按钮通常是纯文本或图文结合的面性形式。图文结合的形式能吸引用户注意，也帮助用户理解该按钮的操作含义。
次按钮
次按钮的层级相对于主按钮层级要弱一些，通常采用线性形式。在一个页面中可以出现多个次按钮。
对于局部操作按钮的设计形式可以是文字按钮、图标按钮，也可以是图标＋文字的形式。至于应该应用哪种形式就要结合具体端场景去考虑。
图标按钮
图标按钮就是用图标来代表该操作的含义，能够直观的表达按钮的功能。在设计的时候我们需要注意图标是易于理解的、是用户熟悉的。图标按钮的设计通常都会配上悬浮框设计，也就是当用户鼠标停留在该图标按钮上会出现对该按钮的文字释义的悬浮框。以微信公众号为例，当鼠标停留在编辑图标那时会出现黑色的悬浮框对其进行解释，让用户理解此按钮的意义，让用户放心操作。
在web设计中，由于按钮的种类与使用场景比较多，建议局部的操作按钮使用线性图标，让它的层级相对其他按钮要弱化一些。
文字按钮
文字按钮通常出现在列表的操作项中。文字的颜色通常是品牌色或者蓝色，因为蓝色在用户的认知中通常是可点击的。
图标＋文字 按钮
图文结合的按钮相对于纯文字按钮会更加直观，也能更吸引用户注意。
3.输入框应该设计几种状态？
考虑的状态越多，设计就会越细，能够及时的反馈信息给用户，从而提高表单填写效率。在考虑输入框的设计状态时，遵循及时反馈的设计原则去考虑。
为了避免用户填写完所有信息后，才反馈有错误，会造成时间浪费，表单填写效率低。通常会把输入框线变成红色，同时出现红色的说明文案，来引起用户的注意。
▵及时反馈错误信息
在设计中我们还需要考虑自动校验的成功与警告状态。颜色通常为绿色与橙色。
输入框到底应该设计几种状态我们也需要根据我们表单的复杂情况去考虑，对于简单的表单设计过于细化的状态是没有必要的。
写在最后的话
表单设计看起来简单，但实际在设计过程中还是有大量的点值得我们去学习与研究的。在这次做表单的过程中，觉得作为设计师我们不应该去挑活，不要觉得表单设计是一个很小的设计就不动脑的照着别人的设计规范抄一遍。像这种看似枯燥但又很重要的模块设计，我们在前期开始设计之前可以从交互层去考虑，再从视觉层面去考虑怎样的表单设计能让用户填得舒心又高效。在看别人的设计规范比如ant design的组件规范时，我们可以去留意他们的设计细节，比如表单上下之间的间距留的是多少？有什么规律吗？按钮的上下边距与左右边距有什么关系吗？通过这些思考，然后去观察总结，并转化为自己的小技巧，到下一次设计表单的时候，我们就会做得很好了。
往期解析
UI设计－首页解析
详情页设计技法解析
轻松get文字标签设计技法
Get点9切图方法（内附切图神器）
F. web 报表工具 有什么好推荐
我推荐ActiveReportsJS。葡萄城控件出品。
ActiveReportsJS 是一款基于 JavaScript 和 HTML5 的轻量级Web报表工具，采用拖拽式设计模式，不需任何服务器和组件支持，即可在 Mac、Linux 和 Windows 操作系统中，设计多种类型的报表。ActiveReportsJS 同时提供跨平台报表设计、纯前端报表展示、多数据源绑定、前端打印导出等功能，灵活丰富的 API 可为您带来无与伦比的报表开发体验。
ActiveReportsJS 作为 .NET报表控件 ActiveReports 在 Web 平台的扩展，不但继承了其强大的报表设计能力和高效的报表开发引擎，还提供了全新的跨平台报表设计器和纯前端报表查看器，全面支持 Node.js、Angular、React、Vue 等前端开发框架。