首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

【图解】Web前端实现类似Excel的电子表格

本文将通过图解的方式,使用纯前端表格控件 SpreadJS 来一步一步实现在线的电子表格产品(例如可构建Office 365 Excel产品、Google的在线SpreadSheet)。...使用前的准备SpreadJS CDN 为了使用的SpreadJS,请在HTML的head标签列出描述。(1)在对语言进行说明,(2) - (3)是读取css,SpreadJS。 <!...;使用SpreadJS,也可以使用addSpan方法来合并多个单元格在工作表上,结果如同Excel一样: // 列結合 activeSheet.addSpan(0, 0, 2,...可以使用类似Excel的公式和函数 可以在Excel通过设置公式的单元格进行计算,求和,平均值,同样地,SpreadJS支持320多种函数,能够轻松实现各类单元格数据处理: ?...SpreadJS提供了数据录入和计算,一级数据的显示,导入和导出为CSV / JSON格式,可用于在Web浏览器上进行浏览。这种方法,设计Web前端的类似Excel的电子表格非常有用的。

8.1K90

【图解】Web前端实现类似Excel的电子表格

本文将通过图解的方式,使用纯前端表格控件 SpreadJS 来一步一步实现在线的电子表格产品(例如可构建Office 365 Excel产品、Google的在线SpreadSheet)。...使用前的准备SpreadJS CDN 为了使用的SpreadJS,请在HTML的head标签列出描述。(1)在对语言进行说明,(2) - (3)是读取css,SpreadJS。 <!...;使用SpreadJS,也可以使用addSpan方法来合并多个单元格在工作表上,结果如同Excel一样: // 列結合 activeSheet.addSpan...可以使用类似Excel的公式和函数 可以在Excel通过设置公式的单元格进行计算,求和,平均值,同样地,SpreadJS支持320多种函数,能够轻松实现各类单元格数据处理: ?...SpreadJS提供了数据录入和计算,一级数据的显示,导入和导出为CSV / JSON格式,可用于在Web浏览器上进行浏览。这种方法,设计Web前端的类似Excel的电子表格非常有用的。

9.1K60

Python 自动化指南(繁琐工作自动化)第二版:十四、使用谷歌表格

或者,如果您的 Google 帐户只有一个带有该标题的电子表格,您可以将电子表格的标题作为字符串传递。...工作表 一个Spreadsheet对象将有一个或多个Sheet对象。Sheet对象代表每个工作表的数据行和列。您可以使用方括号运算符和整数索引来访问这些工作表。...注意,Google 工作表的行末尾有空字符串。这是因为上传的工作表有一个列数6,但是我们只有 4 列数据。您可以使用rowCount和columnCount属性读取工作表的行数和列数。...如果您愿意,您可以更改它们的index属性,以便在新的电子表格它们重新排序。 使用谷歌工作表配额 因为谷歌表格是在线的,所以可以很容易地在多个用户之间共享工作表,这些用户可以同时访问工作表。...请记住,Google 工作表的行号从 1 开始,而不是从 0 开始。单元格的值将是字符串,所以您需要将它们转换成整数,以便您的程序可以使用它们。

8.4K50

详解电子表格的json数据:序列化与反序列化

如果我们收到一个JSON格式的字符串,只需要把它反序列化成一个JavaScript对象,就可以在JavaScript中直接使用这个对象了。...JSON的数据形式与转化方式 在JSON,数据有以下几种形式: 对象:一个没有顺序的"键/值",格式 数组:用以设置数值顺序,格式 字符串:任意数量的Unicode字符,格式 进行数据序列化和反序列化的方式有以下三种...就以我们自身为例,客户在纯前端电子表格JSON数据传输的真实需求是,这段数据需要保证所有可视化内容的完整传输。...我们打开相关的代码,可以清楚地看到在格式这些单元格的设置,都被保存了下来。 在这个图中,我们可以看到不同类型的数据内容都可以完成序列化和反序列化的过程。...使用过程需要注意以下问题: 给 typeName 字段设置完整的类型名字符串(如果有命名空间也应包含命名空间)。

1.6K50

前端提效 - js 批量导出 excel 为zip压缩包

本篇文章主要介绍使用 exceljs、file-saver、jszip实现下载包含多层级文件夹、多个 excel、每个 excel 支持多个 sheet 的 zip 压缩包。...使用示例 文章开头的使用示例,为了方便看清结构,将每个对象的 files 值删除,精简之后得到如下结构: downloadFiles2ZipWithFolder({ zipName: '压缩包...folderName为空字符串,则将它的 files放入压缩包的顶级目录,不在任何子文件内。...folderName为普通字符串:文件夹1,则以 folderName为文件名新建一个文件夹,并将它的 files放入此文件夹下。...folderName为带斜杠的字符串:文件夹2/文件夹2-1/文件夹2-1-1,则按照顺序依次新建 n 个文件夹并保持嵌套关系,最终将它的files放入最后一个文件夹下。

3.2K20

Svelte框架结合SpreadJS实现表格协同文档

首先,从框架搭建上,本篇示例采用当下流行的前后端分离的开发方式,前端使用npm作为脚手架搭建Svelte框架。 后端使用Java的SpringBoot作为后端框架。...前端使用SpreadJS V15.2.5以及SpreadJS在线表格编辑器Designer为前端操作的平台后端使用GCExcel作为文档的终端处理,随时提供备份与恢复。...1、在pageage.json文件引入相关SpreadJS资源 "@grapecity/spread-excelio": "15.2.5", "@grapecity/spread-sheets...在上一篇文章,我们介绍了如何在Svelte框架实现在线表格编辑器。 我们按照此思路新建一个SpreadSheet.svelte文件,写入基础在线表格编辑器。...Open将跳转至前面设计好的在线表格编辑器

1.8K30

个人永久性免费-Excel催化剂功能第39波-DotNet版的正则处理函数

在很久之前已经开发过的一些自定义函数,未能有详细的讲解,接下来几波着重之前开发过的自定义函数进行详细讲解及示例说明,希望能够帮助到普通用户们能顺利使用,此篇介绍为正则表达式函数。...为何要使用正则表达式 正则表达式在字符串处理,是一大利器,从复杂的杂乱的字符串内容,提取出有用的符合要求的信息,仅使用Excel自带的文本处理函数LEFT/RIGHT/MID/SUBSTITUTE...正则表达式在各种主流的编程语言中都有支持,语法较为相近,学习成本也不算太高,现把正则表达式在Excel的自定义函数得以实现,可以极大地方便了广大用户在Excel环境字符串的提取工作。...在DotNet版的正则表达式,支持的功能更多。支持使用Split分割、零宽度先行断言、零宽度后发断言、可命名组等。...RegexReplace函数用法示例 RegexSplit函数 此处的pattern是用于把原input字符串作分割使用。通过指定returnNum来返回指定索引的结果值。 ?

1.1K30

新的Power Query Google Sheets连接器!

在Power BI 11月的更新,Power Query团队为我们带来了一个新的连接器:Google Sheets连接器 https://powerbi.microsoft.com/en-us/blog...第五步:剩下所有的操作与从本地或者onedrive获取文件完全一致: 第六步:发布到web,设置数据源凭据,点击“编辑凭据” 结果出现: 云端powerbi账号使用的是世纪互联版。...问题 Google Sheets连接器由于刚发布不久,而且处于测试阶段,问题还是有不少的。比如,如果同时有多个文件就会有多个url,需要分别登录每一个url,操作上会有些麻烦。...而且,暂时也不能像在Onedrive获取文件夹那样直接获取一个Google文档的文件夹: PowerBI从Onedrive文件夹获取多个文件,依然不使用网关 但是我们发现Google Sheet连接器用的是...在这之前,如果要从Google sheet获取数据到powerbi进行处理分析,一定得走python这一步,且必须使用网关。

5.9K10

何在浏览器中导入Excel表格插件(下)

本文小编将为大家介绍如何在Vue框架中集成在线表格插件(以下简称为“SpreadJS”)和在线表格编辑器(类Excel浏览器插件)实现在浏览器中使用Excel插件来处理数据。...在本教程,我们将使用node.js,请确保已安装最新版本,除此之外还需要使用软件Visual Studio Code(以下简称“VSCode”)作为编程环境,请您以管理员身份运行它。...手把手教你如何使用浏览器表格插件(上)》)小编为大家介绍了如何在Vue框架中集成表格插件(SpreadJS),本章小编将继续为大家介绍如何在Vue中集成在线表格编辑器。...如何在Vue框架中集成在线表格编辑器(designer) 在Vue中集成在线表格编辑器:   本节内容小编将为大家介绍Vue框架如何集成在线表格编辑器和如何实现使用编辑器实现表格数据绑定。       ...import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css" // 设计器

26840

智能分析工具PK:Tableau VS Google Data Studio

Tableau连接到各种各样的数据源,包括文件、数据库和Google的产品(Google Analytics、Google BigQuery、Google Cloud SQL和Google Sheets...显然,Data Studio的本地连接器的列表是非常有限的,所以你会考虑将你的数据优先放到Google SheetsGoogle BigQuery、或者 Cloud SQL。...在Tableau,你可以连接多个数据源,用可视化创建表格,然后在一个仪表板添加多个表格。 Data Studio还提供了将多个数据源添加到单个报表的功能。然后可以使用这些数据源创建图表。...例如,如果将多个数据源添加到一个数据可视化,那么很难判断哪些是正在使用的,哪些不是。...总体结论 总而言之,在这一,虽然Tableau可以提供更好的数据可视化解决方案,但Google在报告方面取得了令人瞩目的进步,缩小了差距。

4.8K60

Python与Microsoft Office

在本例,要传递的字符串是“Excel.Application”,只需在后台打开Excel即可。此时,除非运行任务管理器,否则用户甚至不知道Excel已打开。...下面是Excel的VBA代码: Sub Macro1() ' ' Macro1 Macro ' Sheets("Sheet2").Select End Sub 从这段代码,发现需要调用的sheets...对象的“sheets”方法,在稍微修改之后,通过执行以下操作使其在Python工作: sheet2 = ss.Sheets(“Sheet2”) 现在,我们在工作簿的第二个工作表上有了一个句柄。...如果要向文档添加文本,则需要告诉Word要将文本放到哪里。这就是Range方法的用武之地。虽然看不见,但有一个“网格”告诉Word如何在屏幕上布局文本。...若要在Word添加新行,需要在字符串末尾附加“\r\n”。 代码的其余部分非常好理解。

2.6K20
领券