我们将使用WebSocket从Finnhub.IO获取实时数据,然后使用基本的一个控件产品 SpreadJS 功能来展示数据。...然后继续向HTML 文件添加一些代码,包括对 SpreadJS 脚本和 CSS 引用以及一些基本的初始化代码: <!...绿色 = 正 红色 = 负 创建 SpreadJS Blazor 组件 在将 SpreadJS 放入 Blazor 应用程序之前,我们必须首先创建一个 Blazor 组件来包含 SpreadJS。...在本教程中,我们将使用 Visual Studio 2022 和 SpreadJS V16.0。...想要创建组件,首先要创建一个 Razor 类库: 为简单起见,您可以将其命名为“SpreadJS_Blazor_Lib”: 创建项目后,我们需要将 SpreadJS 文件复制到“wwwroot”文件夹
SpreadJS是葡萄城结合 40 余年专业控件技术和在电子表格应用领域的经验而推出的纯前端表格控件。作为一个类Excel控件,SpreadJS如何实现当前比较流行的表格协同呢?...前端使用SpreadJS V15.2.5以及SpreadJS在线表格编辑器Designer为前端操作的平台后端使用GCExcel作为文档的终端处理,随时提供备份与恢复。...首先,介绍下在前端Svelte框架下搭建SpreadJS在线表格编辑器。...1、在pageage.json文件中引入相关SpreadJS资源 "@grapecity/spread-excelio": "15.2.5", "@grapecity/spread-sheets...实现表格协同文档的方法,如果您想体验更多功能或免费下载试用SpreadJS,欢迎访问葡萄城官网。
本文首发于政采云前端团队博客:数据可视化探索之 SpreadJS https://www.zoo.team/article/explore-spreadjs ?...SpreadJS 在解决可视化分析报表中最为突出,下面我们只针对可视化分析中 SpreadJS 所扮演色做探讨。...SpreadJS (https://demo.grapecity.com.cn/SpreadJS/WebDesigner/?...四、SpreadJS 需求解决方案和优势 1. 并发 由于 SpreadJS 是数据和模板分离的设计,填报人员只需要在页面上完成填报。...图片来源:葡萄城公开课【SpreadJS性能优化】 六、SpreadJS怎么用? 1. 渲染表格 ?
同时,官方具备大量的学习资料及成熟的技术配套服务,只要掌握基础的前端开发技能,就可以轻松上手SpreadJS。本文以Vue3框架为例,简要介绍如何使用SpreadJS来做数据分析及可视化展示。...SpreadJS如何与Vue3框架继承可参考: Vue3构建电子表格; Vue3集成SpreadJS产品文档。...产品集成完成之后,接下来我们一起来了解SpreadJS中关于数据展示及可视化分析的相关功能点。...同理,在SpreadJS中也可以使用透视表来做数据分析。...作为前端控件,SpreadJS也提供了API来支持透视表展示,详细的API说明可参考学习指南-透视表。
近日,葡萄城SpreadJS 纯前端表格控件携手海信集团,共同打造智慧+城市。...海信集团在进行过同类产品的调研评估后,决定使用纯前端表格控件 SpreadJS 开发其内部系统,搭建智慧城市的整体解决方案。...SpreadJS是2018年度优秀软件产品,这是一款基于 HTML5 的纯 Java 电子表格和网格功能控件,以“高速低耗、纯前端、零依赖、可嵌入任何操作系统”为产品特色,同时满足 .NET、Java、...正是因为 SpreadJS 基于 HTML5 的纯前端特性,能完美地嵌入到海信集团公司原有项目体系中,为海信开发团队构建智慧建筑、智慧城市中心产品体系和政务云解决方案带来了极大便利,充分解决了此前智慧城市建设中客户价值体现差...海信集团此次与葡萄城的合作,看重了葡萄城在行业内的多年专业积累,以及SpreadJS纯前端表格控件的超强数据处理能力。
前言 SpreadJS作为一款性能出众的纯前端电子表格控件,自2015年发布以来,已经被广泛应用于各领域“在线Excel”数据管理项目中。...如今,为让您更方便的使用产品和更好地管理项目中的SpreadJS代码,我们已将SpreadJS应用打包发布到了NPM服务器。...第一个创建的文件夹将被称为spreadjs_webpack。...总结 本教程展示了在webpack项目中使用SpreadJS NPM包是多么容易。这只是一个开始,你可以在此基础上创建更高级的项目。...关于SpreadJS – 可嵌入您系统的在线Excel SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,适用于 .NET、Java 、Web 应用程序
可以亲手感受一下) 项目实例 1、该系统使用数据驱动模板,报价所需的材料可以根据实际需要进行勾选,自动生成模板,如该系统中预置的酒店报价模板,可以根据酒店装修的需要,对所需的材料进行勾选,动态生成报价模板,使用SpreadJS...轻松完成了报表模板的生成: 当我们制作完报价模板以后,需要对对应的供应商发布报价,我们可以选择部分供应商进行发布,收到该报价任务的供应商才能有权限参与报价: 供应商参与报价,对报价单进行填报,在使用SpreadJS...的表格控件进行填报时,可以获得和Excel一致的填报体验,可以通过双击填充、拖拽填充等,快速地完成报价表的填报,同时由于使用了SpreadJS的数据绑定功能,可以将填报数据单独取出,方便后面进行比价和分析汇总...: 当供应商完成报价后,管理员要对供应商的报价进行分析和汇总,根据分析结果选择最具性价比的供应商,利用SpreadJS图表的功能,可以对供应商的报价以图表的形式展现出来,方便分析汇总,同时由于报表是用数据驱动的...MjE4NTk4fGYwNWE0Y2E3fDE2NjUzMDUwNDJ8MHwxNDk3NDI%3D 到这里我们就完成了一个采购系统的搭建,大家如果想了解使用纯前端在线表格的行业应用实例,欢迎查看: https://www.grapecity.com.cn/developer/spreadjs
形状(Shapes):在 SpreadJS 中根据需要添加内置或自定以的形状 SpreadJS V12已经实现了诸多类 Excel 的内置形状,如线条、矩形、箭头、流程图,可以为您的前端界面添加更多的细节展现和可视化效果...(图:SpreadJS V12 内置形状) 您还可以通过 SpreadJS V12提供的新能力来自定义您所需要的形状,并且所有的形状属性均可以设置为公式,这就意味着,您的形状可以随着数据的变化而变化,从而为您的前端界面效果带来极大的提升...图表动画效果 借助SpreadJS为柱状图,条形图,折线图和饼图创建新的无缝加载和更新动画,让您的仪表板真正闪耀起来。...(图:SpreadJS v12 新增图表动画) 类 Excel 的精准选择 Excel 的新功能允许用户先选择一个范围,然后取消选择特定单元格。 SpreadJS 已添加此功能。...(图:SpreadJS v12 新增类Excel精确选择) 关于葡萄城: 赋能开发者!
想了解具体内容可看点击查看使用VUE组件创建SpreadJS自定义单元格(一)。 但是在实际场景中,我们可能只需要动态创建VUE组件,而组件的template内容并不需要动态加载。
近日,葡萄城成功签约深圳华为技术有限公司2012实验室,通过纯前端表格控件SpreadJS 助力华为搭建内部表格数据管理系统,整合企业资源,提高整体办公效率。...结合公司的实际需求和对工具的多方评估,华为2012实验室最终选用葡萄城纯前端表格控件 SpreadJS 管理内部数据系统。...SpreadJS是一款基于 HTML5 的纯 Java 电子表格和网格功能控件,因其在界面和功能上与Excel高度类似,而被誉为“可嵌入系统的在线Excel”。...借助葡萄城SpreadJS强大的表格数据开发能力,华为2012实验室将建立一整套统一、安全、快捷的数据管理机制,帮助其专注于核心研究方向,不断扩展产品性能,强化产品质量,提升服务水平。...同时,葡萄城也将不断推出更多性能优异、轻量智能,如 SpreadJS 一样强大的控件产品。 关于葡萄城 赋能开发者!
SpreadJS目前拥有8种下拉列表,在打开列表之前,我们只需要在单元格样式中设置选项数据。...如果大家有其他更好的想法方法,欢迎一起讨论 ~ 如果你对其他更多前端电子表格中有趣功能感兴趣,可以查看 SpreadJS更多实例演示。 我们也会在之后,持续为大家带来更多带来更多严肃和有趣的内容 ~
需要报表系统能够同时连接多个数据源,并融合不同的数据格式 实际的报表中需要对数据结果进行逻辑计算,例如销售的环比和同比、渠道的排名、分类的占比等等 今天小编就将为大家介绍一下如何使用葡萄城纯前端表格控件 SpreadJS...环境准备 SpreadJS在线表格编辑器: SpreadJS 新版本新增了一款报表插件,该插件基于 SpreadJS 本身强大的表格能力,在 DataManager 数据关系引擎的助力下,全新的报表插件让报表和数据录入用户有了全新的能力和体验...1、HTTP请求 现有一个http请求,在浏览器中打开,结果如下: 接下来小编需要通过DataManager添加这个http请求: 1、打开 SpreadJS 在线表格编辑器,如下图所示,依次点击”数据...除此之外,SpreadJS还支持代码获取请求,介绍下如何通过代码的方式添加url数据源,通过借助addTable接口实现添加: spread.dataManager().addTable('GDP',...{ remote: {read: {url: 'https://cdn.grapecity.com.cn/spreadjs/json-sample-data/cityGDPData.json
SpreadJS开发授权 SpreadJS的开发授权分为以下四种: 授权方式 SpreadJS开发授权 团队授权 I 型 团队授权 II 型 企业授权 个人授权 授权数量 4 20 100 1 人数较多...需要用到SpreadJS源码的开发者,可以选择企业授权,因为SpreadJS的JavaScript源码包含在企业授权中。...使用前的准备SpreadJS CDN 为了使用的SpreadJS,请在HTML中的head标签中列出描述。(1)在对语言进行说明,(2) - (3)是读取css,SpreadJS。 <!.../products/spreadjs/ SpreadJS在线演示:http://www.gcpowertools.com.cn/products/spreadjs/demo.htm SpreadJS学习指南
近日,葡萄城成功签约上海泛微网络科技股份有限公司,通过纯前端表格控件SpreadJS搭建泛微协同OA管理平台,实现其组织内外部的协同商务、智能数据组织行为分析、云计算的互联网办公中心、社交化协同应用、个人企业协同互联...为了提高公司的信息化协同发展和企业数据管理水平,以"工作流"的方式为管理落地,上海泛微结合业务需要,经专家多方评估和调研,最终选用了葡萄城纯前端表格控件 SpreadJS,用于泛微协同OA管理平台的开发中...SpreadJS是一款基于 HTML5 的纯 Java 电子表格和网格功能控件,以“高速低耗、纯前端、零依赖、可嵌入任何操作系统”为产品特色,同时满足 .NET、Java、响应式 Web 应用及移动跨平台的表格数据处理和类...本次合作,上海泛微网络科技股份有限公司正是看重了葡萄城在行业内的专业积累,以及SpreadJS纯前端表格控件的超强数据处理能力。
概述 SpreadJS纯前端表格控件 V11.2(SP2)版本已经全面支持了Vue拓展,下面我们看下如何配合VUE CLI,只需3分钟快速构建一个SpreadJS Vue工程。...安装vue-cli(耗时30S) 通过命令```npm install -g @vue/cli ```安装(https://cli.vuejs.org/) 创建vue-spreadjs工程(耗时1Min...', name: 'spreadJS', component: SpreadJS } ] 新建SpreadJS Component(耗时30S) 请在 components 下添加SpreadJS.vue...运行项目(耗时10S) 创建 npm install 依赖后,即可通过npm start启动项目 浏览器访问 http://localhost:8081/#/spreadjs 查看效果。...只需3分钟,一个SpreadJS 的Vue项目就创建完成了,当然纯前端表格控件SpreadJS的强大不仅于此,去实际试用感受一下吧 扩展阅读 这篇文章,讲述的是《3分钟创建 SpreadJS 的 React
本次更新的主要内容有: SpreadJS 全面支持 React 和 Vue SpreadJS 现在支持与 React 和 Vue 框架一起使用,包括特定标签及使两者结合使用的元素和事件。...随着 SpreadJS 在 NPM 上发布,您可以使用传统的 HTML 或 NPM 包将其与框架一起使用。...SpreadJS 可作为 NPM 包公开发布 SpreadJS 现已作为 NPM 包公开发布。该软件包可以在您的应用程序中下载和使用,无需手动重新下载和替换即可轻松更新软件包。...您现在可以在自定义图标集中为单个IconCriterion 添加自定义图标 以上就是 SpreadJS V11.2 的全部内容,如需了解更多,请访问葡萄城 SpreadJS V11.2 新特性。...SpreadJS – 可嵌入您系统的在线Excel SpreadJS 是一款基于 HTML5 的纯 Java 电子表格和网格功能控件,以“高速低耗、纯前端、零依赖”为产品特色,可嵌入任何操作系统,同时满足
DOCTYPE html> SpreadJS ExcelIO <script src="....和 jQuery 文件之外,我们还需要导入 FileSaver 库,为了便于后续程序处理,<em>SpreadJS</em>默认提供完整的文件流,FileSaver库可以用来把文件流转成文件下载到本地。...然后我们可以在页面中添加一个脚本来初始化 Spread.Sheets 组件和一个 div 元素来包含它(因为 <em>SpreadJS</em> 电子表格组件使用了一个画布,这是初始化组件所必需的): <script...这只是一个示例,说明如何使用 <em>SpreadJS</em> JavaScript 电子表格将数据添加到 Excel 文件,然后使用简单的 JavaScript 代码将它们导出回 Excel。...(可扫码体验):http://demo.grapecity.com.cn/<em>spreadjs</em>/mobilesample/
在服务端生成Excel电子表格,除了使用 Node.js + SpreadJS 外,葡萄城官方推荐使用 SpreadJS + GcExcel。...为了验证SpreadJS + GcExcel的处理性能,本文将就GcExcel for Java和Node.js中运行SpreadJS的各项数据进行对比。...由于SpreadJS和GcExcel的组件功能非常丰富,本文仅选择最为常见的两个功能点做对比,分别是设置区域数据和导出Excel文档。...但是,单线程在做复杂运算方面相比多线程则没有任何优势,也无法利用多线程来有效调配多核CPU进行优化,因此在Node.js中运行SpreadJS就只能是单线程JS,这也会影响SpreadJS 的数据处理性能...2、处理性能的对比分析: 即便对于单线程的批量I/O操作,SpreadJS 在 Node.js的运行性能仍不如SpreadJS 在GcExcel for Java中运行,一方面是由于GcExcel性能的确非常优秀
近日,葡萄城纯前端表格控件SpreadJS与江苏润和软件股份有限公司达成合作协议,助力江苏润和完成金融业务信息化全面布局。...为了提高日常办公效率,快速搭建金融IT核心系统解决方案,江苏润和在与葡萄城技术专家充分沟通后,决定使用葡萄城纯前端表格控件SpreadJS管理其内部信息数据。...SpreadJS是一款基于 HTML5 的纯 Java 电子表格和网格功能控件,在外观、功能和操作上都与Excel高度类似,在表格数据处理上比Grid类控件更为优秀,被开发人员誉为“可嵌入系统开发的在线...正是SpreadJS“高速低耗、纯前端、零依赖、可嵌入任何操作系统”的产品特色,让润和开发人员无需顾虑项目可移植性和大数据处理性能问题,从而专注于业务逻辑,迅速构建以标准化的数据模型和场景化的数据分析为基础
data=Hello%20Spreadjs。...下图是使用 SpreadJS 实现的一个二维码样例: SpreadJS如同Excel一样,支持插入图片,定位图片。...base64Data = this.response; } }; xhr.send(); 第2步:获取SpreadJS对象 接下来获取SpreadJS对象 <!...怎么,上述过程太复杂,没有关系,SpreadJS也支持直接创建二维码。 前端表格组件实现二维码公式 第1步:打开SpreadJS 打开刚刚的页面,或者点击这里重新打开SpreadJS。...来实现将 QR 二维码中显示在Excel中,如果您想了解更多关于SpreadJS的信息,欢迎点击这里查看。
领取专属 10元无门槛券
手把手带您无忧上云