葡萄城技术团队博客

摘要：本文介绍了如何在SpreadJS中实现类似Excel的工作表导航功能。通过SpreadJS提供的元素管理器（TableManager、PivotTableManager等）获取工作表元素信息，并利用IDialogTemplate自定义面板展示树形结构。功能包括：1）显示工作簿内所有工作表元素；2）点击元素跳转定位；3）支持模糊搜索。文中详细说明了实现思路，包括元素获取、面板布局设计及搜索功能实现，并附有演示动图和示例代码。最终成功在SpreadJS中复现了Excel的工作表导航功能。

在本地使用Excel时，经常会有需要在Excel中添加一些附件文件的需求，例如在Excel中附带一些Word，CAD图等等。同样的，类比到Web端.....

Hello各位，本葡萄又来啦，今天遇到的场景是这样的：在日常业务流程中，经常需要某一流程环节中相关责任人员进行审批签字，早期许多公司为了省事就直接会把这位负责人的签名以键盘打字（楷体）的形式打印出来，但是这样的坏处就是会导致所有的负责人的签名都是一样的，没有美感，为了解决这个问题，一些公司就开始使用手写签名（用鼠标或者是电子笔写出来的签名）代替电子签名，今天本葡萄就为大家简单的介绍下手写签名到底是怎么实现的

在“协作服务器地址”中输入协同网站中对应仓库的地址，然后点击“确定”，此时会先进行身份验证，输入对应协同网站的用户名或邮箱及密码后，验证通过，活字格会将当前工程推送至对应仓库中，此时该工程已成功创建为协同工程。创建为协同工程后，左侧的对象管理器中，所有分组——表、页面、母版页、服务端命令等都成为协同工程管理下的一部分，可以看到每个独立的页面、母版页等都带有一个小锁的标志。同样，活字格也支持已有的活字格协同工程，随时随地加入协作成员，共同进行活字格的项目开发。至此，可以感受到活字格协同工程的强大了吧。

现在两边都为原始类型，但是类型还是不一样，左边是字符串，右边是bool 类型 ，所以这个 == 又要去干件大事了，继续转，将两边都转换为数值类型。1.左边是一个数组，右边是一个表达式，左边数组就是：[] ， 右边是一个数组的取反!在JS中有很多神奇的语法，非常让人困惑，我们就先一一道来，相信你在开发中或多或少都踩过这些坑，或者让人无法理解。这题对于很多没有系统学过前端开发的技术人员来说，算个重点，来画起来，我们一起看。所以这里可以将等式替换为，相当于 []==false 的比较，

金融建模技术的两种发展趋势也同样影响了未来精算建模软件的发展，我们需要的精算建模软件需要提供动态的财务分析方法，在体现“随机性”、“动态性”思想的同时，还能够随机模拟不确定性环境下公司的资产、负债及未来的经营成果，为高层管理者控制经营风险、制定战略决策提供依据。如果公司的财务状况在这极为罕见的情景下仍然是可以接受的，公司的风险一般假定也是可以承受的。随机模拟下变量情景的构建是利用变量的概率分布随机生成的，而确定性情景分析的情景是预先确定的，而利用确定性技术所生成的变量的情景一般称之为确定性情景。

首先，从框架搭建上,本篇示例采用当下流行的前后端分离的开发方式，前端使用npm作为脚手架搭建Svelte框架。当然，这里也可以用其他工具来代替，例如maven，或者源生引入jar包的方式将需要用到的jar包引入进来。3、协同文档可能不止一个，我们需要在页面上创建一个文档列表，来允许用户选择编辑哪个文档，所以我们需要创建一个文档列表页面OnlineSheets.svelte。这样子，我们做了框架的基本环境搭建，接下来我们介绍下如何搭建webSocket。至此，前端的相关内容就准备好了，接下来搭建下后端工作。

ActiveReportsJS 是纯前端的报表控件，可以用ActiveReportsJS 来解决前端的数据呈现，分页等问题，在使用ActiveReportsJS报表时，常常有明细清单展示类报表的需求，对于这种报表基本都会有导出Excel的需要，目前不支持直接导出成一个Sheet页的Excel，默认导出的是多Sheet页Excel；**图表可视化：**表格大都呈现明细的数据，虽然罗列的数据非常多，但数据不够直观无法快速查看数据的汇总分析，以及分布情况，那么前端数据呈现，以可视化的方式展示需求也非常普遍。

前端打印强依赖于浏览器，主流的思路是先将内容转换为PDF文件，再调用浏览器的打印功能进行打印，而生成PDF文件是依赖于浏览器对于字体，边线等的处理，因此浏览器的异同则直接导致打印出来的效果差距很大，有的边线加粗，有的1页数据，打印出来呈现2页，也是让开发者十分苦恼的事情，对于一些打印要求比较高的行业，这就是灾难。每一次打印都要弹出来打印预览对话框，如果前端需要批量打印，那么意味着客户要点击无数个关闭按钮，才能实现批量打印，如果一次性打印几百张上千张的报表，则会成为“NightMare”。

当然，这里也可以用其他工具来代替，例如maven，或者源生引入jar包的方式将需要用到的jar包引入进来。3、协同文档可能不止一个，我们需要在页面上创建一个文档列表，来允许用户选择编辑哪个文档，所以我们需要创建一个文档列表页面OnlineSheets.svelte。在执行之后，再次添加监听。这样子，我们做了框架的基本环境搭建，接下来我们介绍下如何搭建webSocket。至此，协同基础内容搭建结束，我们来看看编辑单元格内容后，发生了什么吧。接下来我们访问下文档列表页，从文档列表页跳转进入文档，进行编辑。

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。它可以用在 react、angular、vue 等项目中, 但与 react 配合使用更加方便一些。Redux 原理图如下，可以看到store仓库是Redux的核心，通过维护一个store仓库管理 state。state 是只读的，唯一改变 state 的方法就是组件触发 Action。通过编写Reducers 函数，它会接收先前的 state 和 action，并返回新的 state。

SpreadJS 是葡萄城结合40余年专业控件技术和在电子表格应用领域的经验而推出的纯前端表格控件，基于HTML5，兼容450多种Excel公式，具备“高性能、跨平台、与 Excel高度兼容”的产品特性，被中国软件行业协会认定为“中国优秀软件产品”。举办**“表格技术开发者新年分享会”**，期望聚集全国知名企业和持续实践深耕的表格技术开发者们，共同探讨和分享表格技术及其典型应用场景，深度交流表格技术的应用感受和实践经验，共建企业数字化发展的未来。

集的意思就是数据集记和管理。众所周知Excel的工作表（Work Sheet）是一个自由式布局，基于单元格（Cell Base）的表格，适用于一些松散式的数据布局展示，布局上来说非常灵活，但对于固定格式的大批量数据展示，不具备优势。功能层不同于传统表格（Grid），将底层结构化数据进行改造，在支持增删改查等基本功能的基础上，还额外支持了大部分工作表（Work Sheet）的对应功能，如样式，条件格式，数据验证，计算列等。在数据底层，保证上述功能支持的基础上，还能保证数据的结构化，而非松散的数据结构。

但这种数据统计分析如果相对数据透视图来说，设置方式略微复杂，并且与Excel使用方式并不一致，对业务人员来说，存在一定的挑战。在实际调研中发现，采用方案一，自研成本过高，例如Excel中每一种公式函数的实现，跨工作表计算链路分析等等，这些在实现上都有较大的难度。SpreadJS中，集算表是一个具有网状行为和电子表格用户界面的快速数据绑定视图，可以对接具体的API接口，实现数据的增删改查。相对来说，选择类Excel控件是最完美的策略了，它不需要研发人员自研Excel的功能，又提供了大量的API支持扩展开发。

为解决这些性能问题，不少组件也提出了相关的解决方案，以ElementPlus为例，提出了虚拟化表格的概念来流畅的展示更多的数据，但该功能目前仍在测试中，投入生产环境可能会有一定的风险，因此本文不做更多的介绍，大家有兴趣可以参考。作为前端控件，SpreadJS不会限制接口返回数据来源，可以来自关系型数据库MySQL，SQL Server，也可以来自Redis、Mongodb等其它非关系型数据库，当然，也可以来自OA，CRM等其它业务系统。同理，在SpreadJS中也可以使用透视表来做数据分析。

使用透视表，只需要简单几步，即可完成报告的生成，再也不需要苦哈哈的手动去统计数据，之后再制作报表了。切片器同样也可以应用于透视表，在一个Excel文件中，基于相同的数据源，可以生成多个透视表，这些透视表之间会共享数据透视缓存。透视表默认提供了筛选、排序等功能，但在需要多维度筛选分析数据或者多个透视表之间共享筛选条件时，默认的筛选按钮操作起来十分繁琐，并且不够直观，在这种情况下，可以使用切片器来达到数据筛选及共享条件效果。基于透视表，可以生成更加直观炫酷的透视表，是时候在领导面前秀一波了。

在金融行业，我们经常会有审计审查的需求，对某个计算结果进行审查，但是这个计算结果可能依赖多个单元格，而且会有会有多级依赖的情况，如果让我们的从业人员靠眼睛找，工作量巨大，而且准确性存疑，基本上死路一条，因此让整个审查过程可视化，迫在眉睫，现在我们利用纯前端表格和Echarts将审计审查过程可视化。四.接下来我们要用纯前端表格控件的获取引用和从属关系的api将某个单元格的引用和从属关系顺藤摸瓜，刨根问题，刨到“祖坟”上，将这些关系，构造成Echarts树图的data结构，废话不说，直接上核心代码。

相信在学校的你都有这样的体验，临近考试，要疯狂的“背诵”否则成绩单就要挂零，因为答题卡全部涂抹都是错的。那么毕业多年的你，没有了考试，有没有一丝怀念涂答题卡的时候，有没有好奇这个答题卡到底如何制作，成绩表到底如何为每位同学定制动态生成的。这些都要归功于“报表”工具学校每年都会打印很多的学生成绩单，往往因为新增的课程和不同的教学体系，导致想要的结果复杂且多变的。那么如何使用一个工具就可以灵活的制作各种各样报表，面对多变的场景。

数据监控是及时有效的反馈出数据异常的一种手段，通过对数据的监控去观察是否异常，进行分析数据。数据分析是以业务场景和业务目标为思考起点，业务决策作为终点，按照业务场景和业务目标分解为若干影响的因子和子项目，围绕子项目做基于数据现状分析，知道改善现状的方法。数据是产品和运营人员工作中重要的一部分，运营人员常说的一句话是“数据在手，天下我有”，任何事情都要以数据来说事。作为一名运营人员，我们在做运营策略的同时，需要分析大量用户数据，去观测用户行为和用户画像。

在前端导出PDF，解决中文乱码一直是一个头疼的问题。要解决这个问题，需要将ttf等字体文件内容注册到页面PDF生成器中。但是之前网页是没有权限直接获取客户机器字体文件，这时就需要从服务器下载字体文件或者提示用户选择字体文件上传到页面。对于动辄数十兆（M）的中文字体文件，网络不好时并不是一个好的解决方案。

我们接下来采取前后端结合的全栈方案，服务端利用GcExcel高效的性能进行公式计算，前端采用SpreadJS，利用其与GcExcel的兼容性和前端类Excel的操作和展示效果，将后端计算后的结果进行展示。如果用软件系统来管控，在前端页面中操作Excel，可以解决版本控制，以及打通数据孤岛的相关问题，但会引入新的问题：限于浏览器运行环境的资源限制，模型中蕴含大量的复杂公式计算容易造成交互端的性能瓶颈。在数据密集的业务领域，尤其是金融，保险，税务等行业中，经常需要利用Excel模型，来对业务进行分析和处理。

比如SDK版本是11，语法选择8。考虑到导入导出功能需要对Excel具有较高的还原度，这里使用了SpreadJS组件，通过SpreadJS组件的ExcelIO功能，进行Excel的导入与导出。将服务端的文件以文件流的形式传输至前端，前端通过ExcelIO将结果导入结果呈现值SpreadJS中，所以导入的传递的参数是一个文件路径。ArtifactId：是项目的唯一标识符，在实际开发中一般对应项目的名称，就是项目根目录的名称。由于前端传入的是一个文件的路径，所以参数这里我们需要一个字符串类型的参数去接收。

相较于传统的数组存储或是键值对存储，稀疏矩阵存储构建了基于行索引为 Key 的数据字典，在松散布局的表格数据中，稀疏矩阵只会对非空数据进行存储，而不需要对空数据开辟额外的内存空间。表格组件中，也巧妙的使用了稀疏矩阵这一特性，可以随时替换或恢复整个存储结构中的任何一个级别的节点，以改变引用的方式更高效的地解决表格数据回滚和恢复问题，而这一点也为葡萄城表格组件支持多人在线协同打下了一个良好的基础。稀疏矩阵具体的插入，、删除，、搜索，、访问的代码，大家可以自己来搜索，这方面的资料网上有很多。

这里其实就是一个填报场景的体现，例如，当前需要收集人员信息表，每一位员工在填写完成之后，点击提交时，就可以拿到员工信息的一个json数据，之后前端就可以将这些数据发送给服务端，让服务端去做存储了。SpreadJS同时内置了多种数据验证，在数据提交时，结合数据验证，可以在模板中包含异常数据时将请求驳回，建立一套严谨便捷的数据提交汇总流程。如果从最开始将这套数据收集的业务完全做在Web端，整体的数据收集任务下发，填报，数据汇总，数据提取完全自动化，这将会大大的提高业务人员的工作效率。

今天我们就来为大家讲讲如何使用纯前端表格控件＋后端组件快速搭建完整的采购报价系统，让复杂系统不再复杂，搭建简单，上手难度极低，完整成熟的体系化解决方案，让企业数字化采购管理变得轻松。但是对于大多数制造业企业而言，具有企业级整体视角的管理人才仍然难得，系统化的思考方式、解决复杂业务管理问题的方法论也并不是一朝一夕就能量产的。大到生产计划、原料成本预估都会涉及到该系统。管理人员可以通过采购系统减少管理成本，说是管理利器毫不过分，对于采购的效率提升也有极大帮助。接下来我们就带着大家一起看看，该系统的搭建方式。

进行税务申报时，部分数据来源于数据库或历史Excel文件当中，例如公司信息，纳税编号，这些一般都是固化的信息，因此在申报时，我们可以采用绑定默认值的方式直接将这部分信息绑定在单元格中，在这里就需要借助SpreadJS中数据绑定的方式来填充这些固定信息，免除人工填写的过程，简化申报流程。但是在税务申报计算时，一般是排在后边的表会依赖排在前边的工作表，我们可以先加载一些排在前边的工作表，后续通过sheet的切换来加载后续的表。这就需要我们在提交时，删除工作底稿，并且只保留申报表中的计算结果。

但是报表的制作往往需要耗费大量的时间，即使复用制作好的报表模版，一次次周期性对数据的复制粘贴操作也很耗人，同时模版在此过程中也会逐渐变得面目全非。后端是一个SpringBoot项目，嵌入GcExcel组件对编辑、导出等操作，同时借助Quartz定时任务调度框架实现定时任务的管理，并接入了企业微信暴露的群机器人消息对接API，发送消息到企业微信群。3.自动化过程实现：利用定时任务，定时捞取数据，借助GcExcel生成对应类型的文件，通过对接企业微信的API，将文件同步到微信群。

在manifest.json文件中进行基础配置，如icons可以配置插件图标，我们的插件安装后，popup页面也运行了；这时就需要用到background（后台），它是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的；我们开发的插件需要在浏览器里面运行，打开浏览器，通过右上角的三个点（自定义及控制）-更多工具-拓展程序-打开开发者模式。但是有时候，我们需要一些Chrome应用市场上没有的特定功能的插件，例如任务提醒、报表自动生成、与内部数据系统交互的数据分析或上传下载等。

现金流量表（Cash Flow Statement），是指反映企业在一定会计期间现金和现金等价物流入和流出的报表。现金流量表是企业财务报表的三个基本报告之一（另外两个是资产负债表和损益表）。为了全面系统地揭示企业一定时期的财务状况、经营成果和现金流量，财务报表需按财政部会计准则的标准格式设计，因此，财务报表的典型特征是数据更新频繁、分析维度多、数据来源复杂，常规的报表工具很难同时满足上述所有需求本博客将带大家了解如何使用类Excel 的 JavaScript 电子表格在前端创建现金流日历。。

财务报表也称对外会计报表，是会计主体对外提供的反映企业或预算单位一定时期资金、利润状况的会计报表，由资产负债表、损益表、现金流量表或财务状况变动表、附表和附注构成。财务报表是财务报告的主要部分，不包括董事报告、管理分析及财务情况说明书等列入财务报告或年度报告的资料。为了全面系统地揭示企业一定时期的财务状况、经营成果和现金流量，财务报表需按财政部会计准则的标准格式设计，因此，财务报表的典型特征是数据更新频繁、分析维度多、数据来源复杂，常规的报表工具很难同时满足上述所有需求。

在我们的项目当中，经常需要添加一些选择界面，让用户直观地进行交互，比如耗材、办公用品、设计稿或者其它可以选择的内容。先来看看完成的效果：简单三步创建个性化产品目录页除了支持数百种统计和财务功能的高速计算引擎外，我们还将大量使用内置的 RANGEBLOCKSPARKLINE(template_range, data_expr) - 一个强大的迷你图功能，允许用户将单元格范围模板 (template_range) 定义为单个单元格类型并将该模板应用于单元格以将一组数据（data_expr）加载到模板中。

作为葡萄城内训课程之一，由葡萄城内部IT支持系统项目经理Leo为我们带来的《整洁代码之道》将为大家详细讲述代码整洁对于软件质量的重要意义，同时会介绍一些方法，帮助大家识别代码坏味道，让我们的代码保持干净、整洁、易于维护。在代码考古过程中，我们可能会发现一些古怪又不合理的内容，但你要意识到，在这样一段异常代码的背后，往往可能有一些故事。sid=576427。如果我们将软件产品看做冰山，用户可以感知的部分可能只占整体的10%左右，而冰山之下作为支撑的部分，几乎占了90%，这不为人见的部分就是软件的内部质量。

在之前的文章中，我们为大家分别详细介绍了在JavaScript、React中使用SpreadJS导入和导出Excel文件的方法，作为带给广大前端开发者的“三部曲”，本文我们将为大家介绍该问题在Angular中的实现。Excel 电子表格自 1980 年代以来一直为各行业所广泛使用，至今已拥有超过3亿用户，大多数人都熟悉 Excel 电子表格体验。许多企业在其业务的各个环节中使用了 Excel 电子表格进行预算和规划。通常情况下，刚开始时我们的业务流程中的数据简单，也不涉及复杂的格式和数据关系。

最近我们公司接到一个客户的需求，要求为正在开发的项目加个功能。项目的前端使用的是React，客户想添加具备Excel 导入/导出功能的电子表格模块。经过几个小时的原型构建后，技术团队确认所有客户需求文档中描述的功能都已经实现了，并且原型可以在截止日期前做好演示准备。但是，在跟产品组再次讨论客户需求时，我们发现之前对有关电子表格的部分理解可能存在偏差。

JavaScript在前端领域占据着绝对的统治地位，目前更是从浏览器到服务端，移动端，嵌入式，几乎所有的所有的应用领域都可以使用它。技术圈有一句很经典的话“凡是能用JavaScript实现的东西，最后都会用JavaScript实现”。Excel 电子表格自 1980 年代以来一直为各行业所广泛使用，至今已拥有超过3亿用户，大多数人都熟悉 Excel 电子表格体验。许多企业在其业务的各个环节中使用了 Excel 电子表格进行数据管理。

JavaScript在前端领域占据着绝对的统治地位，目前更是从浏览器到服务端，移动端，嵌入式，几乎所有的所有的应用领域都可以使用它。技术圈有一句很经典的话“凡是能用JavaScript实现的东西，最后都会用JavaScript实现”。Excel 电子表格自 1980 年代以来一直为各行业所广泛使用，至今已拥有超过3亿用户，大多数人都熟悉 Excel 电子表格体验。许多企业在其业务的各个环节中使用了 Excel 电子表格进行数据管理。

Canvas是HTML5的标签，是HTML5的一种新特性，又称画板。顾名思义，我们可以将其理解为一块画布，支持在上面绘制矩形、圆形等图形或logo等。需要注意的是，与其他标签不同，Canvas只是一块空画布，其本身是不能绘制图形的，必须通过JavaScript 脚本进行绘制。大多数现代浏览器都支持Canvas技术，例如Chrome、Firefox以及最新的IE9以上版本。

另外，对于原生的PDF文件来说，仅包含英文字体，不包含任何中文字体，因此当导出的内容中含有中文字体编码时，就会显示乱码，所以通常情况下，我们都需要为PDF进行字体注册操作。当然也会有一定的缺点，对于字体较多的文件，需要注册不同的字体，字体文件越大，占用的带宽就越大。具体如何转，可以找一些在线的文件转换器，不过在线的有可能会因为字体文件太大而崩溃，或者有能力的大佬可以自己写一个转换的工具。正如前面所说的，在国内，使用中文的报告是一件再常见不过的事，在计量检测等相关场景，特殊字符的使用也较多。

另外，对于原生的PDF文件来说，仅包含英文字体，不包含任何中文字体，因此当导出的内容中含有中文字体编码时，就会显示乱码，所以通常情况下，我们都需要为PDF进行字体注册操作。当然也会有一定的缺点，对于字体较多的文件，需要注册不同的字体，字体文件越大，占用的带宽就越大。具体如何转，可以找一些在线的文件转换器，不过在线的有可能会因为字体文件太大而崩溃，或者有能力的大佬可以自己写一个转换的工具。正如前面所说的，在国内，使用中文的报告是一件再常见不过的事，在计量检测等相关场景，特殊字符的使用也较多。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。下图是一个产品开发中非常常见的大屏展示界面示例。通过Vue提供的Vuex，上方三个仪表板以及下方的表格组件共享同一个数据源，已经实现了数据改变后同步响应更新。“很棒的大屏展示功能，能支持Excel数据的导入导出吗，表格数据可以实时编辑更新吗？”如果你已经开发软件很长时间，可能不止一次地从最终客户或者产品经理那里听到过这个灵魂拷问。